当用户滚动页面时,我想使用一些花哨的jQuery效果。但我不知道该如何解决这个问题,因为只有 scroll()
方法。
有什么想法吗?
当用户滚动页面时,我想使用一些花哨的jQuery效果。但我不知道该如何解决这个问题,因为只有 scroll()
方法。
有什么想法吗?
您可以使scroll()
函数具有超时功能,该功能在每次用户滚动时被覆盖。这样,当用户在一定毫秒数内停止滚动时,您的脚本会运行,但是如果在此期间他再次滚动,则计数器将重新开始并且脚本将等到他再次停止滚动。
更新:
Because this question got some action again I figured I might as well update it with a jQuery extension that adds a scrollEnd
event
// 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.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);
我需要实现讨论过的onScrollEnd事件。使用计时器的方法对我很有用。
我使用JavaScript模块模式实现了这个功能:
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
//
});
$('.frame').scroll(function() {
$('.back').hide().fadeIn(100);
}
http://api.jquery.com/scroll/.
注意:在Windows Chrome浏览器上,scroll
事件与其他所有浏览器不同。您需要快速滚动才能获得与例如FF相同的结果。请查看https://liebdich.biz/back.min.js中的“X”函数。
我的滚动事件需要多少毫秒
测试发现如下:
fadeIn
函数的原因。将不得不进行更多测试以查找是否还有其他错误,但做得很好,非常好用!其他解决方案对于这样一个小任务来说都太复杂了。 - Fizzix并没有名为“scrollEnd”的事件。我建议您使用setInterval
每隔一段时间(比如200毫秒)检查scroll()
返回的值,并记录当前值与上一个值之间的差值。如果差值变为零,您可以将其用作事件。
document.onscrollend = (event) => {
console.log('Document scrollend event fired!');
};
$(document).on("scrollstop",function(){
alert("Stopped scrolling!");
});
我从一个快速拼凑的代码中提取了一些示例,用于演示此功能(请注意,scroll.chain是一个包含两个数组start和end的对象,它们是回调函数的容器)。还请注意,我在这里使用了jQuery和underscore。
$('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;
}
scrollEnd
? - user7607751