如何检测滚动方向

Question

如何检测滚动方向

64

当有人在一个元素上滚动时，我想要运行一个函数。就像这样：

 $('div').scrollDown(function(){ alert('down') });
 $('div').scrollUp(function(){ alert('up') });

但是这些函数并不存在。有没有解决这个问题的方法？Awwwards似乎能够做到（导航栏中的标志会根据滚动方向改变）。不幸的是，源代码已被压缩，所以没什么运气。

- Rik de Vos

这个不行吗？http://api.jquery.com/scroll/ - jedierikb

这个回答解决了你的问题吗？检测滚动方向 - Vega

8个回答

51

下面的例子将只监听鼠标滚轮事件，不包括触摸屏和触控板的滚动。

它使用jQuery.on()方法（从jQuery 1.7版本开始，该方法是附加事件处理程序到文档的首选方法）。

$('#elem').on( 'DOMMouseScroll mousewheel', function ( event ) {
  if( event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0 ) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
    //scroll down
    console.log('Down');
  } else {
    //scroll up
    console.log('Up');
  }
  //prevent page fom scrolling
  return false;
});

适用于所有浏览器。

fiddle: http://jsfiddle.net/honk1/gWnNv/7/

- honk31

1

刚在IE9、Chrome 42和Firefox 37上测试通过，很不错。之前在Mozilla上遇到了问题，现在解决了。 - dewd

我尝试了这个解决方案，但在FF（49.0.1）上没有起作用，但是将“MozMousePixelScroll”添加到事件中可以解决问题。 - zee

48

这个需要更新一下 - 现在我们有了wheel事件：

$(function() {

$(window).on('wheel', function(e) {

 var delta = e.originalEvent.deltaY;

 if (delta > 0) $('body').text('down');
 else $('body').text('up');

 return false; // this line is only added so the whole page won't scroll in the demo
});
});

body {
  font-size: 22px;
  text-align: center;
  color: white;
  background: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

现代浏览器的支持已经相当不错了：

Chrome 31+
Firefox 17+
IE9+
Opera 18+
Safari 7+

https://developer.mozilla.org/en-US/docs/Web/Events/wheel

如果需要更深层次的浏览器支持，最好使用mousewheel.js而不是自己搞：

https://plugins.jquery.com/mousewheel/

$(function() {

$(window).mousewheel(function(turn, delta) {

 if (delta > 0) $('body').text('up');
 else $('body').text('down');

 return false; // this line is only added so the whole page won't scroll in the demo
});
});

body {
  font-size: 22px;
  text-align: center;
  color: white;
  background: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>

- Shikkediel

1

唯一的问题是：在视口高度以上的网站上，事件只有在滚动停止时才触发，而不是在鼠标滚轮移动的那一刻触发。 - Noah Krasser

也许您可以详细说明您的意思。显然，鼠标转动无法进行平移，我所知道的唯一与您描述相似的问题是IE在鼠标滚轮转动和滚动事件触发之间存在轻微延迟。 - Shikkediel

24

现有解决方案

这篇文章和其他stackoverflow文章提供了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');
        }
    });

多浏览器测试

我无法在Safari上进行测试。

chrome 42（Win 7）

解决方案1
- 向上滚动：每次滚动1个事件
- 向下滚动：每次滚动1个事件
解决方案2
- 向上滚动：不起作用
- 向下滚动：不起作用
解决方案3
- 向上滚动：每次滚动1个事件
- 向下滚动：每次滚动1个事件

Firefox 37（Win 7）

解决方案1
- 向上滚动：每次滚动20个事件
- 向下滚动：每次滚动20个事件
解决方案2
- 向上滚动：不起作用
- 向下滚动：每次滚动1个事件
解决方案3
- 向上滚动：不起作用
- 向下滚动：不起作用

IE 11（Win 8）

解决方案1
- 向上滚动：每滚动1次触发10个事件（副作用：最后会触发一次向下滚动）
- 向下滚动：每滚动1次触发10个事件
解决方案2
- 向上滚动：不起作用
- 向下滚动：不起作用
解决方案3
- 向上滚动：不起作用
- 向下滚动：每滚动1次触发1个事件

IE 10 (Win 7)

解决方案1
- 向上滚动：每滚动1次触发1个事件
- 向下滚动：每滚动1次触发1个事件
解决方案2
- 向上滚动：不起作用
- 向下滚动：不起作用
解决方案3
- 向上滚动：每滚动1次触发1个事件
- 向下滚动：每滚动1次触发1个事件

IE 9 (Win 7)

解决方案1
- 向上滚动：每滚动1次触发1个事件
- 向下滚动：每滚动1次触发1个事件
解决方案2
- 向上滚动：不可用
- 向下滚动：不可用
解决方案3
- 向上滚动：每滚动1次触发1个事件
- 向下滚动：每滚动1次触发1个事件

IE 8 (Win 7)

解决方案1
- 向上滚动：每滚动2次触发1个事件（副作用：最后会出现向下滚动）
- 向下滚动：每滚动1次触发2~4个事件
解决方案2
- 向上滚动：不可用
- 向下滚动：不可用
解决方案3
- 向上滚动：每滚动1次触发1个事件
- 向下滚动：每滚动1次触发1个事件

综合方案

我检查了IE 11和IE 8的副作用，发现是由于if else语句引起的。因此，我将其替换为以下的if else if语句。

通过多浏览器测试，我决定对于常见的浏览器使用解决方案3，对于Firefox和IE 11使用解决方案1。

我参考了this answer来检测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.$1);
    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');
            }
        });
    }

- Chemical Programmer

1

哎呀！我发现移动版Chrome和Android默认浏览器只被解决方案1所覆盖。因此最好同时使用解决方案1和3来覆盖各种浏览器。 - Chemical Programmer

12

$(function(){
    var _top = $(window).scrollTop();
    var _direction;
    $(window).scroll(function(){
        var _cur_top = $(window).scrollTop();
        if(_top < _cur_top)
        {
            _direction = 'down';
        }
        else
        {
            _direction = 'up';
        }
        _top = _cur_top;
        console.log(_direction);
    });
});

演示：http://jsfiddle.net/AlienWebguy/Bka6F/

- AlienWebguy

2

你需要使用scrollTop而不是offset.top。 - Andy Ray

页面仍将滚动
如果页面主体只有600像素高，而您的浏览器窗口为1000像素，则不会检测到滚动。

- Rik de Vos

1

这里是一个示例，展示了一种简单的方法来实现它。脚本如下：

$(function() {
  var _t = $("#container").scrollTop();
  $("#container").scroll(function() {
    var _n = $("#container").scrollTop();
    if (_n > _t) {
      $("#target").text("Down");
    } else {
      $("#target").text("Up");
    }
    _t = _n;
  });
});

#container 是你的div标签 id。 #target 仅用于查看其是否工作。在上下时更改为所需内容。

编辑

OP之前没有说，但由于他正在使用带有overflow: hidden的div标签，因此不会发生滚动，那么检测滚动的脚本就是问题的最小部分。那么，如何检测不发生的事情？！

因此，OP本人发布了带有所需内容的链接，那么为什么不使用该库？ http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js。

调用只需：

$(function() {
    $(".scrollable").scrollable({ vertical: true, mousewheel: true });
});

- Erick Petrucelli

当然，那样做是可行的，但你必须将溢出设置为“auto”，而我已将其设置为“hidden”。如果我可以将溢出设置为“auto”或“scroll”，我就不会问这个问题了;-) - Rik de Vos

0

您可以使用这个简单的插件将 scrollUp 和 scrollDown 添加到您的 jQuery 中。

https://github.com/phpust/JQueryScrollDetector

var lastScrollTop = 0;
var action = "stopped";
var timeout = 100;
// Scroll end detector:
$.fn.scrollEnd = function(callback, timeout) {    
      $(this).scroll(function(){
        // get current scroll top 
        var st = $(this).scrollTop();
        var $this = $(this);
        // fix for page loads
        if (lastScrollTop !=0 )
        {
            // if it's scroll up
            if (st < lastScrollTop){
                action = "scrollUp";
            } 
            // else if it's scroll down
            else if (st > lastScrollTop){
                action = "scrollDown";
            }
        }
        // set the current scroll as last scroll top
        lastScrollTop = st;
        // check if scrollTimeout is set then clear it
        if ($this.data('scrollTimeout')) {
          clearTimeout($this.data('scrollTimeout'));
        }
        // wait until timeout done to overwrite scrolls output
        $this.data('scrollTimeout', setTimeout(callback,timeout));
    });
};

$(window).scrollEnd(function(){
    if(action!="stopped"){
        //call the event listener attached to obj.
        $(document).trigger(action); 
    }
}, timeout);

- S.Kashizadeh

0

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
$(document).bind(mousewheelevt, 
function(e)
    {
        var evt = window.event || e //equalize event object     
        evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible               
        var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF
        if(delta > 0) 
            {
            scrollup();
            }
        else
            {
            scrolldown();
            }   
    }
);

- Jithin U. Ahmed

为什么在evt.detail*(-40)中要乘以-40？ - Alaksandar Jesus Gene

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rik de Vos · Accepted Answer

最终我成功地弄清楚了，如果有人正在寻找答案：

 //Firefox
 $('#elem').bind('DOMMouseScroll', function(e){
     if(e.originalEvent.detail > 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

 //IE, Opera, Safari
 $('#elem').bind('mousewheel', function(e){
     if(e.originalEvent.wheelDelta < 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });