有没有办法计算平滑滚动结束需要多长时间

Question

我希望我的 animation 在 Javascript 中的屏幕停止滚动后运行，否则用户将无法看到它。 不幸的是，chrome中滚动的速度可以变化很大，我不知道如何计算速度。

Answer 1

一旦检测到页面位于正确的滚动位置，为什么不直接启动 animation 而不是计算滚动持续时间？ 您可以使用window.scrollY获取页面的当前垂直滚动，使用element.offsetTop获取元素的顶部 position。

您可以制作一个 function 来检查该元素是否在页面上可见，类似于以下代码。

function elementInScrolledView(element) {
    const pageTop = window.scrollY;
    const pageBottom = pageTop + window.innerHeight;

    const elementTop = element.offsetTop;
    const elementBottom = elementTop + element.offsetHeight;

    return ((elementBottom <= pageBottom) && (elementTop >= pageTop));
}

如果元素高于 window，则此代码可能需要进行一些编辑； 你可以只比较元素的顶部吗？

一旦滚动开始，您可以开始检查每一帧的间隔，直到 function 返回 true，此时您可以清除间隔并启动 animation。