Fel*_*ing 62
您可以为事件添加事件处理程序scroll并启动超时.就像是:
var timer = null;
$(window).addEventListener('scroll', function() {
if(timer !== null) {
clearTimeout(timer);
}
timer = setTimeout(function() {
// do something
}, 150);
}, false);
这将开始超时并等待150ms.如果scroll在此期间发生新事件,则中止计时器并创建新计时器.如果不是,则执行该功能.你可能需要调整时间.
还要注意IE使用不同的方式来附加事件监听器,这应该给出一个很好的介绍:quirksmode - 高级事件注册模型
Dav*_*vid 28
没有"停止滚动"事件.如果要在用户完成滚动后执行某些操作,可以在"OnScroll"事件中设置计时器.如果您再次触发"OnScroll"事件,则重置计时器.当计时器最终触发时,您可以假设滚动已停止.我认为500毫秒是一个很好的持续时间.
以下是一些适用于IE和Chrome的示例代码:
<html>
<body onscroll="bodyScroll();">
<script language="javascript">
var scrollTimer = -1;
function bodyScroll() {
document.body.style.backgroundColor = "white";
if (scrollTimer != -1)
clearTimeout(scrollTimer);
scrollTimer = window.setTimeout("scrollFinished()", 500);
}
function scrollFinished() {
document.body.style.backgroundColor = "red";
}
</script>
<div style="height:2000px;">
Scroll the page down. The page will turn red when the scrolling has finished.
</div>
</body>
</html>
Sam*_*ton 18
这是我在一个名为“ scroll-into-view-if-needed”的存储库中找到的一个更现代的、基于 Promise 的解决方案
它不是addEventListener在事件上使用，而是用于监视没有移动的帧，并在有 20 帧没有移动时进行解析。scrollrequestAnimationFrame
function waitForScrollEnd () {
let last_changed_frame = 0
let last_x = window.scrollX
let last_y = window.scrollY
return new Promise( resolve => {
function tick(frames) {
// We requestAnimationFrame either for 500 frames or until 20 frames with
// no change have been observed.
if (frames >= 500 || frames - last_changed_frame > 20) {
resolve()
} else {
if (window.scrollX != last_x || window.scrollY != last_y) {
last_changed_frame = frames
last_x = window.scrollX
last_y = window.scrollY
}
requestAnimationFrame(tick.bind(null, frames + 1))
}
}
tick(0)
})
}
使用 async/await 然后
await waitForScrollEnd()
waitForScrollEnd().then(() => { /* Do things */ })
此外，还有一个scrollend事件最终将成为最终答案，但截至 2023 年 6 月，似乎仅在 Chrome 和 Firefox 上得到完全支持。
function waitForScrollEnd () {
let last_changed_frame = 0
let last_x = window.scrollX
let last_y = window.scrollY
return new Promise( resolve => {
function tick(frames) {
// We requestAnimationFrame either for 500 frames or until 20 frames with
// no change have been observed.
if (frames >= 500 || frames - last_changed_frame > 20) {
resolve()
} else {
if (window.scrollX != last_x || window.scrollY != last_y) {
last_changed_frame = frames
last_x = window.scrollX
last_y = window.scrollY
}
requestAnimationFrame(tick.bind(null, frames + 1))
}
}
tick(0)
})
}
scrollend在 MDN
scrollendChrome 博客上
(function( $ ) {
$(function() {
var $output = $( "#output" ),
scrolling = "<span id='scrolling'>Scrolling</span>",
stopped = "<span id='stopped'>Stopped</span>";
$( window ).scroll(function() {
$output.html( scrolling );
clearTimeout( $.data( this, "scrollCheck" ) );
$.data( this, "scrollCheck", setTimeout(function() {
$output.html( stopped );
}, 250) );
});
});
})( jQuery );
========>>>> 这里的工作示例