Как определить направление события прокрутки jQuery?

Я ищу что-то вроде этого:

$(window).scroll(function(event){
   if (/* magic code*/ ){
       // upscroll code
   } else {
      // downscroll code
   }
});

какие идеи?

309
javascript jquery

22 ответов

посмотреть scrollTop против 

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st;
});
613

вы можете сделать это без необходимости отслеживать предыдущую верхнюю часть прокрутки, как и все другие примеры требуют:

$(window).bind('mousewheel', function(event) {
    if (event.originalEvent.wheelDelta >= 0) {
        console.log('Scroll up');
    }
    else {
        console.log('Scroll down');
    }
});

Я не эксперт по этому вопросу, поэтому не стесняйтесь исследовать его дальше, но кажется, что когда вы используете $(element).scroll, прослушиваемое событие является событием "прокрутки".

но если вы специально слушать mousewheel событие с помощью bind,originalEvent атрибут параметра event для обратного вызова содержит другую информацию. Часть этого процесса информация wheelDelta. Если он положительный, то вы передвинули мышиное колесо вверх. Если он отрицательный, вы переместили мышиное колесо вниз.

Я предполагаю, что mousewheel события будут срабатывать, когда колесо мыши поворачивается, даже если страница не прокручивается; случай, в котором события "прокрутки", вероятно, не срабатывают. Если вы хотите, вы можете позвонить event.preventDefault() в нижней части обратного вызова, чтобы предотвратить прокрутку страницы и чтобы вы могли использовать событие mousewheel для чего-то другого, чем прокрутка страницы, например некоторые типа функцией Зума.

158

сохраните предыдущее местоположение прокрутки, а затем посмотрите, больше или меньше нового.

вот способ избежать любых глобальных переменных (скрипку здесь):

(function () {
    var previousScroll = 0;

    $(window).scroll(function(){
       var currentScroll = $(this).scrollTop();
       if (currentScroll > previousScroll){
           alert('down');
       } else {
          alert('up');
       }
       previousScroll = currentScroll;
    });
}()); //run this anonymous function immediately
27

Существующее Решение

не может быть 3 решение из этой публикации и другого ответа.

Решение 1

    var lastScrollTop = 0;
    $(window).on('scroll', function() {
        st = $(this).scrollTop();
        if(st < lastScrollTop) {
            console.log('up 1');
        }
        else {
            console.log('down 1');
        }
        lastScrollTop = st;
    });

решение 2

    $('body').on('DOMMouseScroll', function(e){
        if(e.originalEvent.detail < 0) {
            console.log('up 2');
        }
        else {
            console.log('down 2');
        }
    });

решение 3

    $('body').on('mousewheel', function(e){
        if(e.originalEvent.wheelDelta > 0) {
            console.log('up 3');
        }
        else {
            console.log('down 3');
        }
    });

Multi Browser Test

я не мог протестировать его на Safari

chrome 42 (Win 7)

  • решение Один
    • Up: 1 Событие на 1 прокрутку
    • вниз : 1 Событие на 1 свиток
  • Soltion 2
    • итог : не работает
    • вниз : не работает
  • решение 3
    • Up: 1 Событие на 1 прокрутку
    • вниз : 1 Событие на 1 свиток

Firefox 37 (Win 7)

  • Решение 1
    • Up: 20 событий за 1 свиток
    • вниз: 20 событий на 1 прокрутку
  • Soltion 2
    • итог : не работает
    • вниз : 1 Событие на 1 свиток
  • решение 3
    • итог : не работает
    • вниз : не работает

IE 11 (Win 8)

  • Решение 1
    • вверх : 10 событий на 1 прокрутку (побочный эффект: прокрутка вниз наконец-то!)
    • вниз: 10 событий на 1 прокрутку
  • Soltion 2
    • итог : не работает
    • вниз : не работает
  • решение 3
    • итог : не работает
    • вниз : 1 Событие на 1 свиток

IE 10 (Win 7)

  • Решение 1
    • Up: 1 Событие на 1 прокрутку
    • вниз : 1 Событие на 1 свиток
  • Soltion 2
    • итог : не работает
    • вниз : не работает
  • решение 3
    • Up: 1 Событие на 1 прокрутку
    • вниз : 1 Событие на 1 свиток

IE 9 (Win 7)

  • Решение 1
    • Up: 1 Событие на 1 прокрутку
    • вниз : 1 Событие на 1 свиток
  • Soltion 2
    • итог : не работает
    • вниз : не работает
  • решение 3
    • Up: 1 Событие на 1 прокрутку
    • вниз : 1 Событие на 1 свиток

IE 8 (Win 7)

  • Решение 1
    • вверх: 2 события на 1 прокрутку (побочный эффект : прокрутка вниз произошла наконец)
    • вниз : 2~4 события за 1 свиток
  • Soltion 2
    • итог : не работает
    • вниз : не работает
  • решение 3
    • Up: 1 Событие на 1 прокрутку
    • вниз : 1 Событие на 1 свиток

Комбинированное Решение

Я проверил, что побочный эффект от IE 11 и IE 8 с if else заявление. Итак, Я заменил его на if else if заявление следующее.

из теста multi browser я решил использовать решение 3 для обычных браузеров, и Решение 1 для firefox и IE 11.

Я говорил ответ для обнаружения IE 11.

    // Detect IE version
    var iev=0;
    var ieold = (/MSIE (\d+\.\d+);/.test(navigator.userAgent));
    var trident = !!navigator.userAgent.match(/Trident\/7.0/);
    var rv=navigator.userAgent.indexOf("rv:11.0");

    if (ieold) iev=new Number(RegExp.);
    if (navigator.appVersion.indexOf("MSIE 10") != -1) iev=10;
    if (trident&&rv!=-1) iev=11;

    // Firefox or IE 11
    if(typeof InstallTrigger !== 'undefined' || iev == 11) {
        var lastScrollTop = 0;
        $(window).on('scroll', function() {
            st = $(this).scrollTop();
            if(st < lastScrollTop) {
                console.log('Up');
            }
            else if(st > lastScrollTop) {
                console.log('Down');
            }
            lastScrollTop = st;
        });
    }
    // Other browsers
    else {
        $('body').on('mousewheel', function(e){
            if(e.originalEvent.wheelDelta > 0) {
                console.log('Up');
            }
            else if(e.originalEvent.wheelDelta < 0) {
                console.log('Down');
            }
        });
    }
25

Я понимаю, что уже был принят ответ, но хотел опубликовать то, что я использую, если это может помочь кому-либо. Я получаю направление, как cliphex С событием mousewheel, но с поддержкой Firefox. Это полезно делать так, если вы делаете что-то вроде блокировки прокрутки и не можете получить текущую вершину прокрутки.

смотрите живую версию здесь.

$(window).on('mousewheel DOMMouseScroll', function (e) {

    var direction = (function () {

        var delta = (e.type === 'DOMMouseScroll' ?
                     e.originalEvent.detail * -40 :
                     e.originalEvent.wheelDelta);

        return delta > 0 ? 0 : 1;
    }());

    if(direction === 1) {
       // scroll down
    }
    if(direction === 0) {
       // scroll up
    }
});
11

Событие Scroll

на событие Scroll ведет себя странно в FF (он запускается много раз из-за плавности прокрутки), но он работает.

Примечание: The свиток событие уволен при перетаскивании полосы прокрутки с помощью клавиш курсора или колесика мыши. 

//creates an element to print the scroll position
$("<p id='test'>").appendTo("body").css({
    padding: "5px 7px",
    background: "#e9e9e9",
    position: "fixed",
    bottom: "15px",
    left: "35px"
});

//binds the "scroll" event
$(window).scroll(function (e) {
    var target = e.currentTarget,
        self = $(target),
        scrollTop = window.pageYOffset || target.scrollTop,
        lastScrollTop = self.data("lastScrollTop") || 0,
        scrollHeight = target.scrollHeight || document.body.scrollHeight,
        scrollText = "";

    if (scrollTop > lastScrollTop) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }

    $("#test").html(scrollText +
      "<br>innerHeight: " + self.innerHeight() +
      "<br>scrollHeight: " + scrollHeight +
      "<br>scrollTop: " + scrollTop +
      "<br>lastScrollTop: " + lastScrollTop);

    if (scrollHeight - scrollTop === self.innerHeight()) {
      console.log("► End of scroll");
    }

    //saves the current scrollTop
    self.data("lastScrollTop", scrollTop);
});

Событие Колеса

вы также можете взглянуть на MDN, он выставляет большой информация о Событие Колеса.

Примечание: руль событие запускается только при использовании колесика мыши; клавиши курсора и перетаскивание полосы прокрутки не запускают событие.

Я прочитал документ и пример:прослушивание этого события через браузер
и после некоторых тестов с FF, IE, chrome, safari, я закончил с этим фрагмент: 

//creates an element to print the scroll position
$("<p id='test'>").appendTo("body").css({
    padding: "5px 7px",
    background: "#e9e9e9",
    position: "fixed",
    bottom: "15px",
    left: "15px"
});

//attach the "wheel" event if it is supported, otherwise "mousewheel" event is used
$("html").on(("onwheel" in document.createElement("div") ? "wheel" : "mousewheel"), function (e) {
    var evt = e.originalEvent || e;

    //this is what really matters
    var deltaY = evt.deltaY || (-1 / 40 * evt.wheelDelta), //wheel || mousewheel
        scrollTop = $(this).scrollTop() || $("body").scrollTop(), //fix safari
        scrollText = "";

    if (deltaY > 0) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }

    //console.log("Event: ", evt);
    $("#test").html(scrollText +
      "<br>clientHeight: " + this.clientHeight +
      "<br>scrollHeight: " + this.scrollHeight +
      "<br>scrollTop: " + scrollTop +
      "<br>deltaY: " + deltaY);
});
8

в случае, если вы просто хотите знать, если вы выполните прокрутку вверх или вниз с помощью указателя (мыши и сенсорной панели) можно использовать deltaY свойства wheel событие.

$('.container').on('wheel', function(event) {
  if (event.originalEvent.deltaY > 0) {
    $('.result').append('Scrolled down!<br>');
  } else {
    $('.result').append('Scrolled up!<br>');
  }
});
.container {
  height: 200px;
  width: 400px;
  margin: 20px;
  border: 1px solid black;
  overflow-y: auto;
}
.content {
  height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="content">
    Scroll me!
  </div>
</div>

<div class="result">
  <p>Action:</p>
</div>
6
var tempScrollTop, currentScrollTop = 0; 

$(window).scroll(function(){ 

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

   if (tempScrollTop > currentScrollTop ) {
       // upscroll code
   }
  else if (tempScrollTop < currentScrollTop ){
      // downscroll code
  }

  tempScrollTop = currentScrollTop; 
}

или использовать расширение колесико мыши см. здесь.

3

чтобы игнорировать любую привязку / импульс / отскок в верхней и нижней части страницы, Вот измененная версия принятый ответ Джосайи:

var prevScrollTop = 0;
$(window).scroll(function(event){

    var scrollTop = $(this).scrollTop();

    if ( scrollTop < 0 ) {
        scrollTop = 0;
    }
    if ( scrollTop > $('body').height() - $(window).height() ) {
        scrollTop = $('body').height() - $(window).height();
    }

    if (scrollTop >= prevScrollTop && scrollTop) {
        // scrolling down
    } else {
        // scrolling up
    }

    prevScrollTop = scrollTop;
});
3

вы можете определить направление mousewhell.

$(window).on('mousewheel DOMMouseScroll', function (e) {
    var delta = e.originalEvent.wheelDelta ? 
                   e.originalEvent.wheelDelta : -e.originalEvent.detail;

    if (delta >= 0) {
        console.log('scroll up');
    } else {
        console.log('scroll down');
    }
});
3

Я видел много версий хороших ответов здесь, но, похоже, у некоторых людей возникают проблемы с кросс-браузером, поэтому это мое исправление.

Я успешно использовал это для определения направления в FF, IE и Chrome ... Я не тестировал его в safari, поскольку обычно использую windows.

$("html, body").bind({'mousewheel DOMMouseScroll onmousewheel touchmove scroll': 
    function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();

        //Determine Direction
        if (e.originalEvent.wheelDelta && e.originalEvent.wheelDelta >= 0) {
            //Up
            alert("up");

        } else if (e.originalEvent.detail && e.originalEvent.detail <= 0) {
            //Up
            alert("up");

        } else {
            //Down
            alert("down");
        }
    }
});

имейте в виду, что я также использую это, чтобы остановить прокрутку, поэтому, если вы хотите, чтобы прокрутка все еще происходила, вы должны удалить e.preventDefault(); e.stopPropagation();

2

использовать это, чтобы найти направление прокрутки. Это только для того чтобы найти направление вертикальной прокрутки. Поддерживает все кросс-браузеры.

    var scrollableElement = document.getElementById('scrollableElement');

    scrollableElement.addEventListener('wheel', findScrollDirectionOtherBrowsers);

    function findScrollDirectionOtherBrowsers(event){
        var delta;

        if (event.wheelDelta){
            delta = event.wheelDelta;
        }else{
            delta = -1 * event.deltaY;
        }

        if (delta < 0){
            console.log("DOWN");
        }else if (delta > 0){
            console.log("UP");
        }

    }

пример

2

акции инкремент в .data () прокручиваемого элемента, вы сможете проверить количество раз, когда прокрутка достигла вершины.

1

держите его супер просто:

jQuery прослушиватель событий путь:

$(window).on('wheel', function(){
  whichDirection(event);
});

Vanilla JavaScript Прослушиватель Событий Путь:

if(window.addEventListener){
  addEventListener('wheel', whichDirection, false);
} else if (window.attachEvent) {
  attachEvent('wheel', whichDirection, false);
}

Функция Остается Прежней:

function whichDirection(event){
  console.log(event + ' WheelEvent has all kinds of good stuff to work with');
  var scrollDirection = event.deltaY;
  if(scrollDirection === 1){
    console.log('meet me at the club, going down', scrollDirection);
  } else if(scrollDirection === -1) {
    console.log('Going up, on a tuesday', scrollDirection);
  }
}

Я написал более глубокий пост на нем здесь ​​​​​​​

1

вы можете использовать как прокрутку, так и опцию mousewheel для отслеживания движения вверх и вниз одновременно.

 $('body').bind('scroll mousewheel', function(event) {

if (event.originalEvent.wheelDelta >= 0) {
      console.log('moving down');   
    }
    else {
      console.log('moving up'); 
    }
});

вы также можете заменить "тело" на (окно).

1

этот код отлично работает с IE, Firefox, Opera и Chrome:

$(window).bind('wheel mousewheel', function(event) {
      if (event.originalEvent.deltaY >= 0) {
          console.log('Scroll up');
      }
      else {
          console.log('Scroll down');
      }
  });

'колесо колесо' и администрацией deltaY необходимо использовать в bind ()

1

для тех, у кого есть проблемы с эластичной прокруткой, используйте этот ответ

как определить направление прокрутки

0

на .data() элемента вы можете хранить JSON и тестовые значения для запуска событий

{ top : 1,
   first_top_event: function(){ ...},
   second_top_event: function(){ ...},
   third_top_event: function(){ ...},
   scroll_down_event1: function(){ ...},
   scroll_down_event2: function(){ ...}
}
0

Это простое и легкое обнаружение, когда пользователь прокручивает от верхней части страницы и когда они возвращаются к вершине.

$(window).scroll(function() {
    if($(window).scrollTop() > 0) {
        // User has scrolled
    } else {
        // User at top of page
    }
});
0

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

var currentScrollTop = 0 ;

$(window).bind('scroll', function () {     

    scrollTop = $(this).scrollTop();

    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {

        if(scrollTop > currentScrollTop){
            // downscroll code
            $('.mfb-component--bl').addClass('mfbHide');
        }else{
            // upscroll code
            $('.mfb-component--bl').removeClass('mfbHide');
        }
        currentScrollTop = scrollTop;

    }, 250));

});
0

вы должны попробовать это 

var scrl
$(window).scroll(function(){
        if($(window).scrollTop() < scrl){
            //some code while previous scroll
        }else{
            if($(window).scrollTop() > 200){
                //scroll while downward
            }else{//scroll while downward after some specific height
            }
        }
        scrl = $(window).scrollTop();
    });
0

почему никто не использует

0