用户停止滚动时的事件
当用户滚动页面时，我想做一些奇特的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毫秒的事件。
没有像“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; }
