如何检测滚动方向
我想在某个元素上滚动时运行一个函数。 像这样的东西：
$('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(); } } );
你可以使用这个简单的插件添加scrollDown和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);
