В каком направлении и сколько раз был прокручен скролл
Всем привет, собственно сабж. Нужно определить сколько раз и в каком направлении был прокручен скролл (не позиция скролла на странице, а именно сколько раз был прокручен).
Есть классический скрипт: // Функция для добавления обработчика событий function addHandler(object, event, handler, useCapture) { if (object.addEventListener) { object.addEventListener(event, handler, useCapture ? useCapture : false); } else if (object.attachEvent) { object.attachEvent('on' + event, handler); } else alert("Add handler is not supported"); } // Добавляем обработчики /* Gecko */ addHandler(window, 'DOMMouseScroll', wheel); /* Opera */ addHandler(window, 'mousewheel', wheel); /* IE */ addHandler(document, 'mousewheel', wheel); // Обработчик события function wheel(event) { var delta; // Направление скролла // -1 - скролл вниз // 1 - скролл вверх event = event || window.event; // Opera и IE работают со свойством wheelDelta if (event.wheelDelta) { delta = event.wheelDelta / 120; // В Опере значение wheelDelta такое же, но с противоположным знаком if (window.opera) delta = -delta; // В реализации Gecko получим свойство detail } else if (event.detail) { delta = -event.detail / 3; } // Запрещаем обработку события браузером по умолчанию if (event.preventDefault) event.preventDefault(); event.returnValue = false; alert(delta); return delta; } Но, тут при каждом движении скролла переменные стираются и переписываются заново. Т.е. можно определить положение, но сколько раз не выходит. Тут идет delta = -1 если вниз и +1 если вверх. Как бы сделать так, чтобы сначала было -1, затем, -2, -3 и т.д. ну или +1, +2, 3 и т.д. Может быть я конечно и не в том направлении иду. Вообще нужно, чтобы при скроллинге 1 элемент (на всю высоту экрана) заменялся другим и т.д., а сам скролл на сайте был бы отключен. Спасибо. |
webrepa,
почему вы не поставите счетчик на событие mousewheel??? То есть если дельта больше 120 то в переменная i +=1; else q+=1; соответственно i,q - глобальные переменные для этой функции по умолчанию равные 0 |
Буду рад если подскажите как :)
|
Цитата:
|
webrepa,
Цитата:
var countDelta; а в конце функции countDelta += delta; |
webrepa,
строка 16 var q = 0; строка 34 q += delta; |
И всего-то. Спасибо всем огромное. Не пойму почему у меня так не получалось. Раз 100 делал. Видимо натупил в области видимости и объявлял переменные внутри функций. Спасибо еще раз.
|
Возникла новая ситуация. Т.к. я использую эту функцию, чтобы мотать "блоки", то выходит, что если пользователь со всей дури мотанул скролл, то значение увеличивается\уменьшается не на 1. Как бы этого избежать? Буду признателен ответу :)
|
webrepa,
копать debounce |
Что-то так ничего и не выходит. Сейчас скрипт такой:
<script> // Функция для добавления обработчика событий function addHandler(object, event, handler, useCapture) { if (object.addEventListener) { object.addEventListener(event, handler, useCapture ? useCapture : false); } else if (object.attachEvent) { object.attachEvent('on' + event, handler); } else alert("Add handler is not supported"); } // Добавляем обработчики /* Gecko */ addHandler(window, 'DOMMouseScroll', wheel); /* Opera */ addHandler(window, 'mousewheel', wheel); /* IE */ addHandler(document, 'mousewheel', wheel); // Обработчик события var q = 0; function wheel(event) { var delta; // Направление скролла // -1 - скролл вниз // 1 - скролл вверх event = event || window.event; // Opera и IE работают со свойством wheelDelta if (event.wheelDelta) { delta = event.wheelDelta / 120; // В Опере значение wheelDelta такое же, но с противоположным знаком if (window.opera) delta = -delta; // В реализации Gecko получим свойство detail } else if (event.detail) { delta = -event.detail / 3; } // Запрещаем обработку события браузером по умолчанию if (event.preventDefault) event.preventDefault(); event.returnValue = false; q += delta; document.getElementById('div1').innerHTML = q; return delta; } </script> в div1 вывожу результат, чтобы проверять, т.к. через alert стопорит после первого изменения. Не пойму как debounce сюда впихнуть. |
Часовой пояс GMT +3, время: 22:47. |