JavaScript 控制滾動條平滑捲動：手動拖曳與動畫衝突的解決方法

問題現象

點擊「走起」按鈕後滾動條開始平滑捲動，但若在此時用滑鼠手動拖曳滾動條，會出現無法繼續拖動的 Bug。

原因分析

點擊按鈕後啟動了 setInterval 定時器不斷修改 scrollTop，但手動拖動時沒有停止定時器，兩者互相干擾。

解決方法

• 在滑鼠按下滾動條或觸發 scroll 事件時，呼叫 clearInterval(timer) 停止動畫。
• 使用 lock 標誌位防止重複啟動定時器。
• 建議使用 requestAnimationFrame 取代 setInterval，獲得更平滑的動畫效果。

驗證程式碼概念

function ding() {
    var mu = 1000;
    if (lock == 1) {
        lock = 0;
        timer = window.setInterval(function() { detail(mu) }, 50);
    }
}

// 手動拖動時應該清除 timer
window.onscroll = function() {
    window.clearInterval(timer);
    lock = 1;
};