如何用JavaScript實現自定義頁面滾動，讓每次滾輪滾動距離翻倍？

JavaScript自定義頁面滾動：滾輪滾動距離翻倍

許多前端開發者希望能夠自定義頁面滾動行為，以增強用戶體驗或實現特殊效果。本文將講解如何利用javascript修改默認的鼠標滾輪滾動行為，使每次滾動的距離翻倍。

目標是通過JavaScript代碼控制頁面滾動，讓鼠標滾輪每次滾動時，頁面滾動的像素距離從默認值（例如200px）變為400px。這需要攔截瀏覽器的默認滾動事件，并用自定義滾動函數替代。

關鍵在于使用JavaScript的wheel事件和requestAnimationFrame方法。wheel事件捕捉鼠標滾輪滾動行為，requestAnimationFrame則創建平滑的滾動動畫，避免滾動過程中的跳躍感。

實現步驟：首先，獲取當前和目標滾動位置。當前位置用window.pageYOffset獲取。目標位置根據滾輪滾動方向和自定義滾動距離計算得出。我們將滾輪每次滾動的距離乘以2（例如，從e.deltaY * 200變為e.deltaY * 400），實現每次滾動400px的效果。

然后，用requestAnimationFrame逐步滾動到目標位置。此方法根據瀏覽器刷新率優化滾動動畫，確保流暢。代碼中，我們計算每一幀的滾動距離，并用window.scrollTo(0, scrollY)更新頁面滾動位置。

立即學習“Java免費學習筆記（深入）”；

最后，為了避免瀏覽器默認滾動行為干擾自定義滾動，在wheel事件處理函數中調用e.preventDefault()阻止默認事件。

以下代碼片段演示如何實現：

function smoothScroll(targetPosition) {   const startPosition = window.pageYOffset;   const distance = targetPosition - startPosition;   const duration = 1000; // 滾動時間   let start = null;    function step(timestamp) {     if (!start) start = timestamp;     const progress = timestamp - start;     const scrollY = progress / duration * distance + startPosition;     window.scrollTo(0, scrollY);     if (progress < duration) {       requestAnimationFrame(step);     }   }    requestAnimationFrame(step); }  window.addEventListener('wheel', function(e) {   e.preventDefault();   let targetPosition = window.pageYOffset + e.deltaY * 400;   smoothScroll(targetPosition); });

這段代碼通過smoothScroll函數實現平滑滾動，并監聽wheel事件觸發滾動。 修改默認滾動行為可能影響用戶體驗，請謹慎使用。