如何检测滚动方向

Question

我想在有人向下滚动一个元素时运行一个函数.像这样的东西:

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

但这些功能不存在.有这个问题的解决方案吗？他们似乎能够做到这一点.不幸的是源代码是压缩的,所以没有运气......

谢谢!!

Answer 1

我设法最终搞清楚了,所以如果有人在寻找答案:

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

Answer 2

以下示例将仅侦听MOUSE滚动,无触摸或触控板滚动.

它使用jQuery.on()(从jQuery 1.7开始,.on()方法是将事件处理程序附加到文档的首选方法).

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

适用于所有浏览器.

小提琴:http://jsfiddle.net/honk1/gWnNv/7/

Answer 3

这个值得更新 - 现在我们有了这个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 +
• 歌剧院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>

Answer 4

现有解决方案

这个帖子和其他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上测试它

铬42(赢7)

• 解决方案1
  • Up:每1个卷轴1个事件
  • 向下:每1个滚动1个事件
• 解决2
  • Up:不工作
  • 下来:不工作
• 解决方案3
  • Up:每1个卷轴1个事件
  • 向下:每1个滚动1个事件

Firefox 37(Win 7)

• 解决方案1
  • 向上:每1个卷轴20个事件
  • 向下:每1卷滚动20个事件
• 解决2
  • Up:不工作
  • 向下:每1个滚动1个事件
• 解决方案3
  • Up:不工作
  • 下来:不工作

IE 11(Win 8)

• 解决方案1
  • Up:每1个滚动10个事件(副作用:最后发生向下滚动)
  • 向下:每1卷滚动10个事件
• 解决2
  • Up:不工作
  • 下来:不工作
• 解决方案3
  • Up:不工作
  • 向下:每1个滚动1个事件

IE 10(Win 7)

• 解决方案1
  • Up:每1个卷轴1个事件
  • 向下:每1个滚动1个事件
• 解决2
  • Up:不工作
  • 下来:不工作
• 解决方案3
  • Up:每1个卷轴1个事件
  • 向下:每1个滚动1个事件

IE 9(赢7)

• 解决方案1
  • Up:每1个卷轴1个事件
  • 向下:每1个滚动1个事件
• 解决2
  • Up:不工作
  • 下来:不工作
• 解决方案3
  • Up:每1个卷轴1个事件
  • 向下:每1个滚动1个事件

IE 8(Win 7)

• 解决方案1
  • Up:每1个滚动2个事件(副作用:最后发生向下滚动)
  • 向下:每1卷滚动2~4个事件
• 解决2
  • Up:不工作
  • 下来:不工作
• 解决方案3
  • Up:每1个卷轴1个事件
  • 向下:每1个滚动1个事件

综合解决方案

我检查了IE 11的副作用,IE 8来自if else声明.所以,我用if else if声明替换它如下.

从多浏览器测试中,我决定将解决方案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.$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');
            }
        });
    }

Answer 5

$(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/