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

Question

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

Answer 1

与其计算滚动持续时间，为什么不在检测到页面位于正确的滚动位置后立即启动动画呢？可以使用window.scrollY获取页面的当前垂直滚动，使用element.offsetTop获取元素的顶部位置。

您可以制作一个函数来检查元素在页面上是否可见，方法如下代码所示。

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));
}

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

滚动开始后，您可以开始检查每一帧的间隔，直到函数返回true，此时您可以清除间隔并开始动画。