Как различить скролл/прокрутку вверх и вниз jQuery? o_o

Небольшая полезность, которая пригодилась мне вчера.

В моем любимом jQuery есть событие прокрутки элемента scroll.  С этим все понятно.

Кстати, событие scroll используется и в плагине, который добавляет красивую кнопку прокрутки страницы.

Но что делать, если мне надо различить, когда элемент скроллится вниз, а когда вверх?

Как обрабатывать прокрутку окна или блока вниз и вверх раздельно?

Для этого случая есть небольшое решение:

var tempScrollTop, currentScrollTop = 0;

jQuery("#div").scroll(function(){

currentScrollTop = jQuery("#div").scrollTop();

if (tempScrollTop < currentScrollTop )
//scrolling down
else if (tempScrollTop > currentScrollTop )
//scrolling up

tempScrollTop = currentScrollTop;
}

P.S. Это решение обрабатывает все варианты прокрутки: колесико мыши, кнопки вверх/вниз на клаве и саму полосу прокрутки/скроллбар.

Схема/цветовая разметка классического scrollbar'а

Пусть пригодится!

Богдан Григорук

[ Прочитайте комменты ниже или напишите свой... ]

Ищете хостинг для своего сайта? Могу порекомендовать свой (нажмите здесь)

8 комментариев к “Как различить скролл/прокрутку вверх и вниз jQuery? o_o”

  1. Игорь 08.10.2014 в 20:26 #

    Пригодилось)

  2. Любовь 14.09.2015 в 16:10 #

    Спасибо, очень помог.

  3. Дмитри 16.09.2015 в 07:53 #

    Чувак, спасибо! С меня пиво)

  4. Виталий 14.08.2016 в 22:51 #

    Спасибо, очень помог

  5. Ruzel 02.02.2017 в 13:17 #

    Только начинаю вникать в js, спасибо очень пригодилось )))

  6. Andrey 28.04.2017 в 02:41 #

    Пригодилось. Спасибо.

  7. Ivan 03.10.2017 в 12:53 #

    я хз как у коментаторов выше получилось с этим кодом что то сделать НО скобка закрывающая в коде пропущена.айя яй...

  8. Ivan 03.10.2017 в 13:07 #

    да и переменная tempScrollTop = undefined ВСЕГДА БУДЕТ