如何确定jQuery滚动事件的方向？

Posted 2021-04-11

我正在寻找这样的效果：

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

有任何想法吗？

答案

检查当前的scrollTop与之前的scrollTop

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

另一答案

要忽略页面顶部和底部的任何快照/动量/反弹，这里是Josiah's accepted answer的修改版本：

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;
});

另一答案

您可以确定鼠标滚轮方向。

$(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');
    }
});

另一答案

保持简单：

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);
  }
}

我在它上面写了一篇更深入的帖子here

另一答案

您可以同时使用滚动和鼠标滚轮选项来跟踪上下移动。

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

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

你也可以用（窗口）替换'body'。

另一答案

使用它来查找滚动方向。这只是为了找到垂直滚动的方向。支持所有跨浏览器。

    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");
        }

    }

Example

另一答案

此代码适用于IE，Firefox，Opera和Chrome：

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

'wheel mousewheel'和属性deltaY必须在bind（）函数中使用。

请记住：出于安全原因，您的用户必须更新其系统和浏览器。在2018年，“我有IE 7”的借口是胡说八道。我们必须教育用户。

祝你有美好的一天 ：）

另一答案

在滚动的元素的.data ()中存储增量，然后您将能够测试滚动到达顶部的次数。

另一答案

为什么没人在滚动时使用event返回的jQuery对象？

$window.on('scroll', function (event) {
    console.group('Scroll');
    console.info('Scroll event:', event);
    console.info('Position:', this.pageYOffset);
    console.info('Direction:', event.originalEvent.dir); // Here is the direction
    console.groupEnd();
});

我正在使用chromium，如果他们有dir属性，我没有检查其他浏览器。

另一答案

自从q3xswpoi v3（“被bind has been deprecated取代”）和on以来，忘记wheel is now supported：

wheelDelta

$(window).on('wheel', function(e) {
  if (e.originalEvent.deltaY > 0) {
    console.log('down');
  } else {
    console.log('up');
  }
  if (e.originalEvent.deltaX > 0) {
    console.log('right');
  } else {
    console.log('left');
  }
});

另一答案

在元素的wheel中，您可以存储JSON并测试值以启动事件

Browser Compatibility on MDN's (2019-03-18)

另一答案

您可以在不必跟踪上一个滚动顶部的情况下执行此操作，因为所有其他示例都需要：

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

我不是这方面的专家所以请随意进一步研究它，但看来当你使用$(element).scroll时，正在听的事件是一个'滚动'事件。

但是如果您通过使用bind专门侦听mousewheel事件，则事件参数的originalEvent属性包含不同的信息。部分信息是wheelDelta。如果是正面，则向上移动鼠标滚轮。如果是负数，则向下移动鼠标滚轮。

我的猜测是，即使页面不滚动，当鼠标滚轮转动时，mousewheel事件也会触发;可能不会触发“滚动”事件的情况。如果需要，可以在回调的底部调用event.preventDefault()以防止页面滚动，这样您就可以将鼠标滚轮事件用于除页面滚动之外的其他内容，例如某种类型的缩放功能。

另一答案

当用户滚动离开页面顶部时以及当它们返回顶部时，这是简单且容易的检测。

另一答案

这是用于在用户结束滚动时检测方向的最佳解决方案。

.data()

另一答案

你应该试试这个

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

另一答案

我有弹性滚动问题（滚动弹跳，橡皮筋）。如果靠近页面顶部，则忽略向下滚动事件。

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

另一答案

你也可以使用它

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');
以上是关于如何确定jQuery滚动事件的方向？的主要内容，如果未能解决你的问题，请参考以下文章
 
 jQuery中有鼠标滚轮事件么？
 jQuery 平滑滚动片段以不同的速度工作
 jQuery/JavaScript：检测滚动方向 - 代码结构问题
 如何在滚动视图中设置谷歌地图片段
 如何解决“无法确定滚动的导航方向”错误
 如何在不实际滚动的情况下确定滚动方向