Jquery 如何检测滚动方向

我想在有人向下滚动某个元素时运行一个函数。大概是这样的：

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

但这些功能并不存在。这个问题有解决办法吗？似乎能够做到这一点（导航栏中的徽标根据滚动方向而变化）。不幸的是，源代码是压缩的，因此没有运气。

$（function（）{
$(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);
    });
});

var_top=$（window.scrollTop（）；
var_方向；
$（窗口）。滚动（函数（）{
var_cur_top=$（窗口）.scrollTop（）；
如果（顶部<当前顶部）
{
_方向=‘向下’；
}
其他的
{
_方向=‘向上’；
}
_顶部=_cur_top；
控制台日志（_方向）；
});
});

演示：

展示了一种简单的方法。剧本是：

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

#容器

是您的div

id

。

#目标就是看到它工作。在上升或下降时更改为您想要的

编辑

OP之前没有说，但是因为他使用了带有
溢出：隐藏
的div，所以没有出现滚动，那么检测滚动的脚本是其中最小的一个。那么，如何检测没有发生的事情

所以，OP自己发布了他想要的链接，为什么不使用这个库呢

电话只是：

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

我最终设法找到了答案，所以如果有人在寻找答案：

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

//Firefox
$（'#elem'）.bind（'DOMMouseScroll'，函数（e）{
如果（e.originalEvent.detail>0）{
//向下滚动
console.log（'Down'）；
}否则{
//向上滚动
console.log（'Up'）；
}
//防止页面fom滚动
返回false；
});
//歌剧、狩猎
$（'#elem'）.bind（'mouseweel'，函数（e）{
如果（e.originalEvent.wheelDelta<0）{
//向下滚动
console.log（'Down'）；
}否则{
//向上滚动
console.log（'Up'）；
}
//防止页面fom滚动
返回false；
});
以下示例将只听鼠标滚动，不听触摸屏或触摸板滚动

它使用（从jQuery1.7开始，.on（）方法是将事件处理程序附加到文档的首选方法）

$（'elem'）。在（'DOMMouseScroll mousewheel'，函数（事件）{
如果（event.originalEvent.detail>0 | | event.originalEvent.wheelDelta<0）{//wheeldeldata的可选选项：wheelDeltaX和wheelDeltaY
//向下滚动
console.log（'Down'）；
}否则{
//向上滚动
console.log（'Up'）；
}
//防止页面fom滚动
返回false；
});

适用于所有浏览器

fiddle:
现有解决方案
这篇文章可能有3个解决方案，还有

解决方案1


多浏览器测试
我无法在Safari上测试它

铬42（赢7）


解决方案1

向上：每1个滚动1个事件
向下：每1个滚动1个事件

溶液2

起床：不工作
唐：不工作

解决方案3

向上：每1个滚动1个事件
向下：每1个滚动1个事件


Firefox37（Win7）


解决方案1

最多：每卷20个事件
向下：每1个滚动20个事件

溶液2

起床：不工作
向下：每1个滚动1个事件

解决方案3

起床：不工作
唐：不工作


IE 11（赢8）


解决方案1

向上：每1次滚动10个事件（副作用：最后发生向下滚动）
向下：每1个滚动10个事件

溶液2

起床：不工作
唐：不工作

解决方案3

起床：不工作
向下：每1个滚动1个事件


IE 10（赢7）


解决方案1

向上：每1个滚动1个事件
向下：每1个滚动1个事件

溶液2

起床：不工作
唐：不工作

解决方案3

向上：每1个滚动1个事件
向下：每1个滚动1个事件


IE 9（赢7）


解决方案1

向上：每1个滚动1个事件
向下：每1个滚动1个事件

溶液2

起床：不工作
唐：不工作

解决方案3

向上：每1个滚动1个事件
向下：每1个滚动1个事件


IE 8（赢7）


解决方案1

向上：每1次滚动2个事件（副作用：最后发生向下滚动）
向下：每1个滚动2~4个事件

溶液2

起床：不工作
唐：不工作

解决方案3

向上：每1个滚动1个事件
向下：每1个滚动1个事件



组合溶液
我检查了IE 11和IE 8的副作用来自于
if-else
语句。因此，我将其替换为
if-else-if
语句，如下所示

在多浏览器测试中，我决定对普通浏览器使用解决方案3，对firefox和IE11使用解决方案1

我提到了第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');
            }
        });
    }

//检测IE版本
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”）；
如果（ieold）iev=新编号（RegExp.$1）；
如果（navigator.appVersion.indexOf（“MSIE 10”）！=-1）iev=10；
如果（三叉戟和rv！=-1）iev=11；
//Firefox还是IE 11
如果（InstallTrigger的类型！='undefined'| | iev==11）{
var lastScrollTop=0；
$（窗口）.on（'scroll'，function（）{
st=$（this.scrollTop（）；
如果（stlastScrollTop）{
console.log（'Down'）；
}
lastScrollTop=st；
});
}
//其他浏览器
否则{
$（'body'）。在（'mousew'）上
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();
            }   
    }
);

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

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

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

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

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