JS监听滚动事件

在JavaScript中，没有原生的“滚动结束”事件可以直接监听。不过，你可以通过监听滚动事件（scroll）并使用一些技术来模拟一个“滚动结束”或“滚动停止”的行为。这种方法通常涉及到设置一个定时器（setTimeout 或 requestAnimationFrame），当滚动事件触发时重置定时器，定时器到时（即用户停止滚动一段时间后）则认为滚动结束。

以下是一个使用setTimeout来实现“滚动结束”事件的示例：

let scrollTimeout;

// 监听滚动事件
window.addEventListener('scroll', function() {
    // 如果已经设置了定时器，则清除它
    if (scrollTimeout) {
        clearTimeout(scrollTimeout);
    }

    // 设置一个新的定时器，等待一段时间（例如50毫秒）来检测是否停止滚动
    scrollTimeout = setTimeout(function() {
        // 在这里执行你希望在滚动结束时执行的代码
        console.log('滚动结束了！');

        // 注意：此时你可以放心地更新页面布局或执行重绘等操作

        // 清除定时器，尽管在这个场景中不是必须的，因为我们已经执行了回调函数
        // 但如果在回调函数中需要重置某些状态，确保不会重复触发，这个清除是有用的
        clearTimeout(scrollTimeout);
        scrollTimeout = null;
    }, 50); // 可以调整这个值以适应不同的滚动速度或延迟需求
});

这个方法的一个好处是它可以适应不同用户的滚动速度。不过，如果你发现即使停止滚动后仍然频繁触发“滚动结束”的逻辑，你可能需要增加延迟时间（即setTimeout中的时间）。

此外，还有一个使用requestAnimationFrame的方法，这种方法可能更加精确，尤其是在需要精确控制动画或重绘的时机时。不过，由于requestAnimationFrame设计之初是为了动画而不是检测滚动停止，所以上述的setTimeout方法对于大多数“滚动结束”事件的模拟已经足够好用了。

请记得，在用户快速滚动时，这些方法可能不会按预期工作，因为滚动事件可能会在定时器到时之前连续触发，从而重置定时器。但通常情况下，对于用户体验而言，这种方法已经足够好了。