如何检测滚动方向

我想在某个元素上滚动时运行一个函数。 像这样的东西:

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

但是这些function不存在。 有没有解决这个问题? 他们似乎能够做到这一点。 不幸的是,源代码是压缩的,所以没有运气…

谢谢!!

我终于搞清楚了,所以如果有人正在寻找答案:

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

下面的例子只会听到鼠标滚动,没有触摸或触控板滚动。

它使用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/

这一个值得更新 – 现在我们有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> 

现有的解决scheme

有可能是从这篇文章和其他stackoverflow文章 3解决scheme

解决scheme1

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

解决scheme2

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

解决scheme3

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

多浏览器testing

我无法在Safari上testing它

铬42(赢7)

  • 解决scheme1
    • 上一次:每滚动1个事件
    • 向下:每1次滚动1个事件
  • 解决2
    • 上:不工作
    • 下来:不工作
  • 解决scheme3
    • 上一次:每滚动1个事件
    • 向下:每1次滚动1个事件

Firefox 37(Win 7)

  • 解决scheme1
    • 最多:每个滚动20个事件
    • 向下:每1次滚动20个事件
  • 解决2
    • 上:不工作
    • 向下:每1次滚动1个事件
  • 解决scheme3
    • 上:不工作
    • 下来:不工作

IE 11(Win 8)

  • 解决scheme1
    • 上行:每滚动10个事件(副作用:最后发生下滚动)
    • 向下:每滚动10个事件
  • 解决2
    • 上:不工作
    • 下来:不工作
  • 解决scheme3
    • 上:不工作
    • 向下:每1次滚动1个事件

IE 10(Win 7)

  • 解决scheme1
    • 上一次:每滚动1个事件
    • 向下:每1次滚动1个事件
  • 解决2
    • 上:不工作
    • 下来:不工作
  • 解决scheme3
    • 上一次:每滚动1个事件
    • 向下:每1次滚动1个事件

IE 9(Win 7)

  • 解决scheme1
    • 上一次:每滚动1个事件
    • 向下:每1次滚动1个事件
  • 解决2
    • 上:不工作
    • 下来:不工作
  • 解决scheme3
    • 上一次:每滚动1个事件
    • 向下:每1次滚动1个事件

IE 8(Win 7)

  • 解决scheme1
    • 最多:每次滚动2个事件(副作用:最后发生向下滚动)
    • 向下:每滚动2〜4个事件
  • 解决2
    • 上:不工作
    • 下来:不工作
  • 解决scheme3
    • 上一次:每滚动1个事件
    • 向下:每1次滚动1个事件

综合解决scheme

我检查了从IE 11和IE 8的副作用来自if else语句。 所以,我把它replace, if else if语句如下。

从多浏览器testing中,我决定使用常见浏览器的解决scheme3和Firefox 11和IE 11的解决scheme1

我提到这个答案来检测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'); } }); } 
 $(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/

这里有一个示例显示了一个简单的方法来做到这一点。 脚本是:

 $(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 overflow: hidden ,所以不会发生滚动,那么检测滚动的脚本是最less的。 那么,如何检测不发生的事情?

所以,OP自己贴出了他想要的链接,为什么不使用这个库呢? http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js

电话只是:

 $(function() { $(".scrollable").scrollable({ vertical: true, mousewheel: true }); }); 
 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(); } } ); 

你可以使用这个简单的插件添加scrollDownscrollDown到你的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);