溫馨提示×

setInterval如何實現平滑的滾動效果

小樊
120
2024-06-18 14:32:58
欄目: 編程語言

要實現平滑的滾動效果,可以使用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的間隔時間,可以調整滾動的速度和平滑程度。

0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女