温馨提示×

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

小樊
96
2024-06-18 14:32:58
栏目: 编程语言
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

要实现平滑的滚动效果,可以使用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的间隔时间,可以调整滚动的速度和平滑程度。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读:在Android中如何实现平滑的垂直滚动效果

0