使用`scroll-behavior：smooth`来检测滚动何时完成 [英] Detect when scrolling has finished when using `scroll-behavior: smooth`

问题描述

滚动到页面上的某个元素完成时检测的最佳方法是什么？规范说：使用用户代理定义的计时功能，可以在用户代理定义的时间段内平滑地滚动滚动框。用户代理应遵循平台约定（如果有）。

What is the best way to detect when scrolling to an element on the page has finished? The spec says that "The scrolling box is scrolled in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time. User agents should follow platform conventions, if any."

（2017-11-23）在相关注释上， Firefox 58现在具有仅限Chrome浏览器的 scrollend 事件。

(2017-11-23) On a related note, Firefox 58 now has a chrome-only scrollend event.

推荐答案

唯一可行的选择似乎是等待直到不再有 scroll 事件：

The only feasible option appears to be to just wait until there aren't any more scroll events:

let timer;
window.addEventListener( 'scroll', () => {
    clearTimeout( timer );

    timer = setTimeout( () => {
        callback();
    }, 300 );
}, { passive: true } );

这篇关于使用`scroll-behavior：smooth`来检测滚动何时完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！