JavaScript自定義頁面滾動：滾輪滾動距離翻倍
許多前端開發(fā)者希望能夠自定義頁面滾動行為，以增強用戶體驗或?qū)崿F(xiàn)特殊效果。本文將講解如何利用javascript修改默認的鼠標滾輪滾動行為，使每次滾動的距離翻倍。
目標是通過JavaScript代碼控制頁面滾動，讓鼠標滾輪每次滾動時，頁面滾動的像素距離從默認值（例如200px）變?yōu)?00px。這需要攔截瀏覽器的默認滾動事件，并用自定義滾動函數(shù)替代。
關(guān)鍵在于使用JavaScript的wheel事件和requestAnimationFrame方法。wheel事件捕捉鼠標滾輪滾動行為，requestAnimationFrame則創(chuàng)建平滑的滾動動畫，避免滾動過程中的跳躍感。
實現(xiàn)步驟：首先，獲取當(dāng)前和目標滾動位置。當(dāng)前位置用window.pageYOffset獲取。目標位置根據(jù)滾輪滾動方向和自定義滾動距離計算得出。我們將滾輪每次滾動的距離乘以2（例如，從e.deltaY * 200變?yōu)閑.deltaY * 400），實現(xiàn)每次滾動400px的效果。
然后，用requestAnimationFrame逐步滾動到目標位置。此方法根據(jù)瀏覽器刷新率優(yōu)化滾動動畫，確保流暢。代碼中，我們計算每一幀的滾動距離，并用window.scrollTo(0, scrollY)更新頁面滾動位置。
立即學(xué)習(xí)“Java免費學(xué)習(xí)筆記（深入）”；
最后，為了避免瀏覽器默認滾動行為干擾自定義滾動，在wheel事件處理函數(shù)中調(diào)用e.preventDefault()阻止默認事件。
以下代碼片段演示如何實現(xiàn)：
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函數(shù)實現(xiàn)平滑滾動，并監(jiān)聽wheel事件觸發(fā)滾動。 修改默認滾動行為可能影響用戶體驗，請謹慎使用。
