setInterval如何实现平滑的滚动效果

avatar
作者
猴君
阅读量:2

要实现平滑的滚动效果,可以使用setInterval结合window.scrollTo来实现。以下是一个简单的示例代码:

let targetPosition = 0; let currentPosition = window.pageYOffset; let smoothScrollInterval;  function smoothScroll() {     if (currentPosition < targetPosition) {         window.scrollTo(0, currentPosition);         currentPosition += 10; // 控制滚动速度         smoothScrollInterval = setTimeout(smoothScroll, 10); // 间隔时间     } else {         window.scrollTo(0, targetPosition);         clearInterval(smoothScrollInterval);     } }  function scrollToPosition(position) {     targetPosition = position;     currentPosition = window.pageYOffset;     smoothScroll(); }  // 调用示例 scrollToPosition(500); // 滚动到500px位置 

在上面的示例中,当调用scrollToPosition函数时,会启动一个setInterval来平滑地滚动到目标位置。通过控制currentPosition的增加速度和setInterval的间隔时间,可以调整滚动的速度和平滑程度。

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!