用户停止滚动时的事件

当用户滚动页面时,我想做一些奇特的jQuery的东西。 但我不知道如何解决这个问题,因为只有scroll()方法。

有任何想法吗?

您可以使scroll()有一个超时,每次用户滚动覆盖。 这样,当他停止一定数量的毫秒后,脚本就会运行,但是如果他在同一时间内滚动,计数器将重新开始,脚本将等待,直到他再次滚动。

更新:

因为这个问题再次得到了一些行动,我想我不妨更新一个jQuery扩展,添加一个scrollEnd事件

 // extension: $.fn.scrollEnd = function(callback, timeout) { $(this).scroll(function(){ var $this = $(this); if ($this.data('scrollTimeout')) { clearTimeout($this.data('scrollTimeout')); } $this.data('scrollTimeout', setTimeout(callback,timeout)); }); }; // how to call it (with a 1000ms timeout): $(window).scrollEnd(function(){ alert('stopped scrolling'); }, 1000); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="height: 200vh"> Long div </div> 

下面是一个简单的例子,使用setTimeout在用户停止滚动时触发一个函数:

 (function() { var timer; $(window).bind('scroll',function () { clearTimeout(timer); timer = setTimeout( refresh , 150 ); }); var refresh = function () { // do stuff console.log('Stopped Scrolling'); }; })(); 

滚动事件触发时定时器被清除。 一旦滚动停止,刷新function被触发。

或者作为一个插件:

 $.fn.afterwards = function (event, callback, timeout) { var self = $(this), delay = timeout || 16; self.each(function () { var $t = $(this); $t.on(event, function(){ if ($t.data(event+'-timeout')) { clearTimeout($t.data(event+'-timeout')); } $t.data(event + '-timeout', setTimeout(function () { callback.apply($t); },delay)); }) }); return this; }; 

在div(包含名称空间)上最后一次滚动事件100ms后触发callback:

 $('div.mydiv').afterwards('scroll.mynamespace', function(e) { // do stuff when stops scrolling $(this).addClass('stopped'); }, 100 ); 

我用这个来滚动和resize。

这里是另一个更通用的解决scheme,基于上述相同的想法:

 var delayedExec = function(after, fn) { var timer; return function() { timer && clearTimeout(timer); timer = setTimeout(fn, after); }; }; var scrollStopper = delayedExec(500, function() { console.log('stopped it'); }); document.getElementById('box').addEventListener('scroll', scrollStopper); 

为什么这么复杂? 正如文档指出的,这个http://jsfiddle.net/x3s7F/9/的作品!;

 $('.frame').scroll(function() { $('.back').hide().fadeIn(100); } 

http://api.jquery.com/scroll/


注意: Windows Chrome上的scroll事件与所有其他scroll事件不同。 您需要快速滚动以获得与例如FF相同的结果。 看看https://liebdich.biz/back.min.js的“X”function。;

从我的一些调查结果来看, how many ms a scroll eventtesting:

  • Safari,Mac FF,Mac Chrome:约16ms事件。
  • Windows FF:约19ms事件。
  • Windows Chrome:高达〜130ms的事件,滚动速度慢。
  • Internet Explorer:高达〜110毫秒的事件。

http://jsfiddle.net/TRNCFRMCN/1Lygop32/4/

没有像“scrollEnd”这样的事件。 我build议你每隔一段时间(例如200ms)使用setInterval检查scroll()返回的值,并logging当前值和前一个值之间的差值。 如果增量变为零,则可以将其用作事件。

有滚动开始和scrollstopfunction,是jQuery的移动的一部分。

使用scrollstop的示例:

 $(document).on("scrollstop",function(){ alert("Stopped scrolling!"); }); 

希望这有助于某人。

我有需要实现onScrollEnd事件讨论听到以及。 使用计时器的想法适用于我。

我使用JavaScript模块模式实现了这个function:

 var WindowCustomEventsModule = (function(){ var _scrollEndTimeout = 30; var _delayedExec = function(callback){ var timer; return function(){ timer && clearTimeout(timer); timer = setTimeout(callback, _scrollEndTimeout); } }; var onScrollEnd = function(callback) { window.addEventListener('scroll', _delayedExec(callback), false); }; return { onScrollEnd: onScrollEnd } })(); // usage example WindowCustomEventsModule.onScrollEnd(function(){ // // do stuff // }); 

希望这将有助于/激励某人

我从一块拼凑起来的代码中抽出了一些代码,这是一个例子(注意scroll.chain是一个包含两个数组开始和结束的对象,它们是callback函数的容器)。 另外请注意,我在这里使用jQuery和下划线。

 $('body').on('scroll', scrollCall); scrollBind('end', callbackFunction); scrollBind('start', callbackFunction); var scrollCall = function(e) { if (scroll.last === false || (Date.now() - scroll.last) <= 500) { scroll.last = Date.now(); if (scroll.timeout !== false) { window.clearTimeout(scroll.timeout); } else { _(scroll.chain.start).each(function(f){ f.call(window, {type: 'start'}, e.event); }); } scroll.timeout = window.setTimeout(self.scrollCall, 550, {callback: true, event: e}); return; } if (e.callback !== undefined) { _(scroll.chain.end).each(function(f){ f.call(window, {type: 'end'}, e.event); }); scroll.last = false; scroll.timeout = false; } }; var scrollBind = function(type, func) { type = type.toLowerCase(); if (_(scroll.chain).has(type)) { if (_(scroll.chain[type]).indexOf(func) === -1) { scroll.chain[type].push(func); return true; } return false; } return false; }