實現平滑滾動的核心在于控制滾動速度和動畫時長，1.使用window.scrollto或element.scrollto配合requestanimationframe模擬動畫效果；2.通過緩動函數使滾動更自然；3.優化性能時減少重排重繪，優先使用css transform；4.處理兼容性可使用polyfill或兼容性前綴；5.實現滾動劫持需監聽wheel事件并自定義滾動邏輯，但需注意用戶體驗與可訪問性。
實現平滑滾動，本質上就是讓頁面滾動不是瞬間完成，而是在一段時間內逐漸完成。這可以通過改變滾動位置的速度來實現，給人一種流暢的視覺效果。
JS實現平滑滾動的4種優化方案
如何用JS實現基本的平滑滾動？
最基礎的平滑滾動實現，可以使用window.scrollTo()或element.scrollTo()方法，配合requestAnimationFrame()來模擬動畫效果。關鍵在于控制滾動速度和動畫時長。
function smoothScroll(target, duration) { let targetElement = document.querySelector(target); let targetPosition = targetElement.getBoundingClientRect().top; let startPosition = window.pageYOffset; let startTime = null; function animation(currentTime) { if (startTime === null) startTime = currentTime; let timeElapsed = currentTime - startTime; let run = ease(timeElapsed, startPosition, targetPosition, duration); window.scrollTo(0, run); if (timeElapsed < duration) requestAnimationFrame(animation); } // 緩動函數，可以根據需要選擇 function ease(t, b, c, d) { t /= d/2; if (t < 1) return c/2*t*t + b; t--; return -c/2 * (t*(t-2) - 1) + b; } requestAnimationFrame(animation); } // 調用示例 document.getElementById('scrollButton').addEventListener('click', function() { smoothScroll('#targetElement', 1000); // 滾動到#targetElement，動畫時長1秒 });
這段代碼的核心在于animation函數，它使用requestAnimationFrame來循環更新滾動位置，ease函數則定義了滾動的緩動效果，讓滾動看起來更自然。
如何優化平滑滾動的性能？
性能優化主要集中在減少重繪和重排上。避免在滾動過程中頻繁修改dom，盡可能使用css transform來模擬滾動效果。另外，可以考慮使用IntersectionObserver來檢測元素是否在可視區域內，只有在需要滾動時才執行動畫。
// 使用CSS transform模擬滾動 element.style.transform = `translateY(-${scrollPosition}px)`;
這種方式可以避免觸發瀏覽器的重排，從而提高性能。同時，合理選擇緩動函數也很重要，過于復雜的緩動函數會增加計算量。
如何處理不同瀏覽器之間的兼容性問題？
不同瀏覽器對scrollTo()方法的支持可能存在差異，特別是對于平滑滾動參數的支持。可以使用polyfill或者庫來解決兼容性問題。另外，requestAnimationFrame也需要考慮兼容性，可以使用window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame來確保在各種瀏覽器上都能正常工作。
如何實現更高級的平滑滾動效果，例如滾動劫持？
滾動劫持（Scroll Hijacking）是一種更高級的平滑滾動效果，它會阻止瀏覽器的默認滾動行為，完全由JavaScript來控制滾動。實現滾動劫持需要監聽wheel事件，阻止默認行為，并使用JavaScript來模擬滾動效果。
window.addEventListener('wheel', function(e) { e.preventDefault(); // 阻止默認滾動行為 let delta = e.deltaY; // 獲取滾動方向和距離 // 根據delta值來控制滾動方向和速度 scrollPosition += delta; element.style.transform = `translateY(-${scrollPosition}px)`; });
需要注意的是，滾動劫持可能會影響用戶體驗，因為它改變了用戶習慣的滾動方式。因此，在使用滾動劫持時需要謹慎，確保滾動效果流暢自然，并且提供清晰的視覺反饋。同時，要考慮到可訪問性，確保鍵盤用戶也能正常瀏覽內容。
