如何用JavaScript自定義鼠標滾輪滾動頁面時的距離？

掌控網頁滾動：JavaScript自定義鼠標滾輪滾動距離

許多開發者希望能夠微調網頁的滾動行為，例如調整鼠標滾輪滾動頁面時每次滾動的像素距離。本文將詳細講解如何運用javascript實現這一功能，并提供可運行的代碼示例。

目標是通過JavaScript修改鼠標滾輪滾動頁面時的滾動距離，例如將默認的每次滾動200像素調整為自定義值，比如400像素。

為了實現平滑的滾動效果，避免直接修改scrollTop屬性帶來的卡頓，我們將利用JavaScript的requestAnimationFrame方法。

首先，我們需要獲取當前滾動位置和目標滾動位置。當前位置可通過window.pageYOffset獲取。目標位置則根據鼠標滾輪事件的deltaY值計算得出。deltaY表示滾輪滾動方向和距離，正值代表向下滾動，負值代表向上滾動。為了將每次滾動距離修改為400像素，我們將deltaY值乘以400。

接下來，計算滾動距離（目標位置與當前位置的差值）。然后，使用requestAnimationFrame方法逐步調整scrollTop值，實現平滑滾動。requestAnimationFrame方法根據瀏覽器刷新頻率執行動畫，確保流暢性。代碼中的duration變量控制動畫持續時間，可根據需求調整。

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

以下是具體的代碼實現：

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); });

代碼中，e.preventDefault()阻止默認滾動行為，確保自定義滾動效果生效。smoothScroll函數執行平滑滾動，wheel事件監聽器在每次滾輪滾動時調用該函數。

請注意，直接修改頁面滾動行為可能影響用戶體驗，開發者應謹慎使用此方法，并根據實際情況調整參數。