当用户滚动页面时,我想做一些奇特的 jQuery 东西。但是我不知道如何解决这个问题,因为只有scroll()
方法。
有任何想法吗?
当用户滚动页面时,我想做一些奇特的 jQuery 东西。但是我不知道如何解决这个问题,因为只有scroll()
方法。
有任何想法吗?
您可以设置scroll()
超时,每次用户滚动时都会被覆盖。这样,当他在一定毫秒后停止时,您的脚本将运行,但如果他同时滚动,计数器将重新开始,脚本将等待他再次完成滚动。
更新:
因为这个问题再次得到了一些行动,我想我不妨用添加scrollEnd
事件的 jQuery 扩展来更新它
// extension:
$.fn.scrollEnd = function(callback, timeout) {
$(this).on('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://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></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');
};
})();
触发滚动事件时清除计时器。一旦滚动停止,刷新功能就会被触发。
或者作为插件:
$.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(带有命名空间)上的最后一个滚动事件的 100 毫秒后触发回调:
$('div.mydiv').afterwards('scroll.mynamespace', function(e) {
// do stuff when stops scrolling
$(this).addClass('stopped');
}, 100
);
我用它来滚动和调整大小。
这是基于上述相同想法的另一个更通用的解决方案:
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/。
注意:scroll
Windows Chrome 上的事件与所有其他事件不同。您需要快速滚动以获得与例如 FF 中的结果相同的结果。看看https://liebdich.biz/back.min.js的“X”函数。
我how many ms a scroll event
测试的一些发现:
我也需要实现讨论过的onScrollEnd事件。使用计时器的想法对我有用。
我使用JavaScript module模式实现了这一点:
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
//
});
希望这会帮助/激励某人