要實現頁面的平滑滾動，核心在于利用bom接口結合requestanimationframe逐步更新滾動位置。1. 使用window.scrollto()或scrolltop屬性控制滾動目標；2. 通過requestanimationframe實現與瀏覽器刷新率同步的動畫循環；3. 引入緩動函數（如ease-out）提升滾動自然感；4. 記錄起始時間、計算進度并動態調整滾動位置；5. 在動畫完成或用戶干預時及時終止循環。相比css的scroll-behavior: smooth，該方法具備更高的控制粒度、更廣的兼容性和更強的擴展性，適用于復雜交互場景。開發時應封裝為可復用函數，并支持目標參數化、偏移量設置、容器滾動及promise回調等特性，以提升代碼效率和用戶體驗。
要實現頁面的平滑滾動，核心在于利用瀏覽器提供的BOM（Browser Object Model）接口，特別是window.scrollTo()或window.scrollBy()，并結合動畫循環機制（通常是requestAnimationFrame）來逐步、平滑地改變滾動位置，而不是一下子跳過去。這就像電影里的慢鏡頭，把一個瞬間的動作分解成無數個微小的幀，讓它看起來連貫自然。
解決方案
平滑滾動的基本思路是計算出每次動畫幀需要滾動的距離，然后不斷更新頁面的scrollTop或scrollLeft屬性，直到達到目標位置。這個過程需要一個起始點、一個目標點、一個動畫持續時間，以及一個決定動畫速度變化的“緩動函數”（easing function）。
我們通常會這樣做：
- 記錄初始狀態：獲取當前的滾動位置和目標滾動位置。
- 計算動畫總時長：確定滾動需要多少毫秒完成。
- 使用requestAnimationFrame：這是一個瀏覽器API，告訴瀏覽器你希望執行一個動畫，并請求瀏覽器在下一次重繪之前調用你指定的回調函數。它比setTimeout或setInterval更適合動畫，因為它能確保動畫與瀏覽器的刷新率同步，避免卡頓和掉幀。
- 在回調函數中：
- 計算自動畫開始以來經過的時間。
- 根據經過的時間和緩動函數，計算出當前應該滾動的進度（0到1之間的一個值）。
- 根據進度和總滾動距離，計算出當前應該到達的滾動位置。
- 調用window.scrollTo()或直接設置document.documentElement.scrollTop（或document.body.scrollTop，取決于文檔模式）來更新滾動位置。
- 如果動畫還沒結束，繼續調用requestAnimationFrame，形成循環。
- 如果動畫結束，停止循環。
這是一個簡化的JavaScript示例：
function smoothScrollTo(targetY, duration = 500) { const startY = window.pageYOffset; // 當前滾動位置 const distanceY = targetY - startY; // 需要滾動的總距離 let startTime = null; // 緩動函數：這里用一個簡單的 ease-out const easeOutQuad = (t) => t * (2 - t); function animateScroll(currentTime) { if (!startTime) startTime = currentTime; const elapsedTime = currentTime - startTime; const progress = Math.min(elapsedTime / duration, 1); // 進度，0到1 const easedProgress = easeOutQuad(progress); // 應用緩動函數 window.scrollTo(0, startY + distanceY * easedProgress); if (progress < 1) { requestAnimationFrame(animateScroll); } } requestAnimationFrame(animateScroll); } // 示例用法：點擊按鈕平滑滾動到頁面頂部 // document.getElementById('backToTopBtn').addEventListener('click', () => { // smoothScrollTo(0); // });
為什么不直接用css的scroll-behavior: smooth？
說實話，當scroll-behavior: smooth這個css屬性出來的時候，我心里是竊喜的，覺得終于可以少寫點JS了。它確實方便，只需要在CSS里給html或body加上scroll-behavior: smooth;，然后當你點擊一個錨點鏈接（如）或者調用element.scrollIntoView()時，頁面就會自動平滑滾動，省心省力。
但話說回來，這東西雖然好用，卻不是萬能的。它有幾個明顯的局限性：
- 控制粒度不夠：CSS的smooth只是一個開關，你無法自定義動畫的時長、緩動曲線。比如，你可能希望某個滾動特別快，另一個則慢悠悠地滑過去，CSS就做不到了。它就是“平滑”，但具體怎么“平滑”，它說了算，你說了不算。
- 兼容性問題：雖然現代瀏覽器支持度不錯，但如果你需要兼容一些老舊的瀏覽器，或者你的用戶群體中有大量使用特定舊版瀏覽器的，那CSS方案可能就得打個問號了。BOM方案雖然復雜點，但兼容性通常更好，因為它是基于JavaScript的通用能力。
- 不適用于任意滾動：scroll-behavior: smooth主要針對的是由用戶行為（如點擊錨點）或scrollIntoView()觸發的滾動。如果你想實現一個按鈕，點擊后平滑滾動到頁面某個計算出來的、非固定位置（比如某個動態加載的內容頂部），或者你希望在特定事件發生時（比如數據加載完成）自動滾動到某個區域，CSS就有點力不從心了。BOM方案則提供了對window.scrollTo和window.scrollBy的完全控制，可以精確地指定滾動目標。
- 缺乏事件回調：CSS動畫是“fire and forget”式的，你無法知道動畫什么時候開始、什么時候結束，也就沒法在動畫完成后執行其他操作。而JS方案可以通過Promise或者回調函數來監聽動畫完成事件，這在很多復雜交互場景下是必不可少的。
所以，在我看來，scroll-behavior: smooth更適合那些對滾動控制要求不高、追求快速實現且不考慮老舊瀏覽器兼容性的場景。一旦你需要更精細的控制、更復雜的邏輯，或者更廣泛的兼容性，BOM方案依然是你的首選，因為它給了你真正的“主宰權”。
實現平滑滾動時，如何處理動畫性能和用戶體驗？
平滑滾動這事兒，搞不好就成了“卡頓滾動”或者“抽搐滾動”，所以性能和用戶體驗是重中之重。
動畫性能方面：
- requestAnimationFrame的魔力：我前面提過，用requestAnimationFrame是關鍵。它不是簡單地每隔多少毫秒執行一次，而是告訴瀏覽器：“喂，我這里有個動畫，你下次渲染畫面前記得叫我一聲，我好更新一下位置。”瀏覽器會把多個動畫請求合并處理，并在最佳時機執行，這能有效減少不必要的重繪和回流，避免動畫卡頓。對比setTimeout和setInterval，后兩者可能在瀏覽器忙碌時導致幀率不穩定，甚至掉幀，而requestAnimationFrame則能更好地與瀏覽器的渲染周期同步。
- 避免在循環內做重活：在requestAnimationFrame的回調函數里，只做最核心的計算和dom操作——更新滾動位置。避免在這個函數里執行復雜的DOM查詢、大量的布局計算或者網絡請求。這些“重活”應該在動畫開始前就準備好，或者在動畫結束后再進行。
- 精簡DOM操作：雖然我們只操作了scrollTop，但也要注意，頻繁地讀寫DOM屬性（特別是那些會觸發布局重算的屬性）是性能殺手。好在scrollTop的設置相對輕量，但如果動畫涉及到更復雜的元素位置變化，就要特別小心了。
用戶體驗方面：
- 緩動函數（Easing Function）的選擇：這玩意兒簡直是平滑滾動的靈魂！一個線性的滾動（勻速）會顯得很生硬，就像機器人走路。而一個好的緩動函數能讓滾動過程更自然、更富有生命力。
- Ease-out：動畫開始時快，結束時慢，給人一種“剎車”的感覺，很常用，比如我上面示例用的easeOutQuad。
- Ease-in：動畫開始時慢，結束時快，有點像“加速”的感覺。
- Ease-in-out：開始和結束都慢，中間快，感覺最平滑自然，就像汽車起步加速再減速停車。 你可以去搜一下“Penner’s easing functions”，里面有各種各樣的數學公式，能模擬出不同的動畫效果。選擇一個合適的緩動函數，能極大提升用戶感知的流暢度。
- 動畫時長：這是一個經驗值。太短（比如100ms）會感覺像瞬間跳躍，不夠“平滑”；太長（比如2000ms）又會讓人覺得等待太久，失去耐心。通常，300ms到800ms是一個比較舒服的范圍，具體取決于滾動的距離和內容的重要性。短距離可以快一點，長距離可以適當放慢。
- 可中斷性：用戶在動畫過程中可能會手動滾動頁面。一個好的平滑滾動函數應該能檢測到用戶的干預，并立即停止當前的動畫，將控制權交還給用戶。這通常通過監聽scroll事件，并在用戶滾動時清除當前的requestAnimationFrame來實現。
- 目標明確：確保用戶知道滾動會去哪里。如果滾動目標在屏幕外很遠的地方，最好能給用戶一個視覺提示，比如滾動條的變化或者一個指示器。
綜合來說，實現平滑滾動不僅僅是寫幾行代碼那么簡單，它涉及到對瀏覽器渲染機制的理解，以及對用戶心理的把握。
編寫可復用的平滑滾動函數有哪些技巧？
為了避免每次需要平滑滾動時都寫一堆重復的代碼，把邏輯封裝成一個可復用的函數是明智之舉。一個健壯且靈活的平滑滾動函數，通常會考慮以下幾點：
-
參數化設計：
- target：目標位置，可以是數字（Y坐標），也可以是一個DOM元素（函數內部計算其Y坐標）。這讓函數既能滾動到精確的像素位置，也能滾動到某個元素的頂部。
- duration：動畫持續時間，毫秒為單位，默認值可以設為500ms。
- easing：緩動函數，可以作為參數傳入。這樣用戶可以根據需要選擇不同的緩動效果。如果用戶不傳，就用一個默認的（比如easeOutQuad）。
- offset：滾動到目標位置時，可以有一個額外的偏移量。比如，你滾動到一個標題，但希望標題上方留出50px的間距，這個參數就很有用。
-
返回Promise：讓函數返回一個Promise，這樣外部代碼就能知道動畫何時完成，從而在動畫結束后執行其他操作。這比傳統的傳入回調函數更現代，也更利于異步流程控制。
-
處理多重調用和中斷：
- 取消上一個動畫：如果用戶在當前動畫還沒結束時又觸發了新的滾動，應該立即停止前一個動畫，開始新的動畫。這可以通過保存當前的requestAnimationFrame ID，并在新動畫開始前調用cancelAnimationFrame來實現。
- 用戶手動滾動中斷：監聽scroll事件。如果用戶在動畫進行中手動滾動了頁面，也應該立即取消當前的動畫。這需要一個標志位來區分是程序滾動還是用戶滾動。
-
支持滾動特定容器：不僅僅是window，有時我們也需要讓某個可滾動容器（div、iframe等）內部平滑滾動。函數應該能接受一個container參數，如果提供了，就操作這個容器的scrollTop，否則默認操作window。
-
健壯性考慮：
- 邊界條件：目標位置是否有效？持續時間是否為正數？
- 兼容性：考慮document.documentElement.scrollTop和document.body.scrollTop在不同瀏覽器和文檔模式下的差異。通常現代瀏覽器推薦使用document.documentElement.scrollTop。
這是一個更完善的平滑滾動函數骨架：
let currentScrollAnimationId = null; // 用于存儲當前的 requestAnimationFrame ID function getScrollParent(element) { let parent = element.parentNode; while (parent && parent !== document.body && parent !== document.documentElement) { const style = getComputedStyle(parent); if (style.overflowY === 'auto' || style.overflowY === 'scroll') { return parent; } parent = parent.parentNode; } return window; // 默認返回window } function smoothScroll(target, options = {}) { if (currentScrollAnimationId) { cancelAnimationFrame(currentScrollAnimationId); currentScrollAnimationId = null; } const { duration = 500, easing = (t) => t * (2 - t), // 默認 easeOutQuad offset = 0, container = window // 默認滾動window，也可以傳入DOM元素 } = options; let startY; let targetY; let scrollElement; if (container === window) { startY = window.pageYOffset; scrollElement = document.documentElement; // 現代瀏覽器通常用這個 if (document.body.scrollTop) { // 兼容IE和舊版Safari scrollElement = document.body; } } else { startY = container.scrollTop; scrollElement = container; } if (typeof target === 'number') { targetY = target; } else if (target instanceof HTMLElement) { const rect = target.getBoundingClientRect(); if (container === window) { targetY = rect.top + window.pageYOffset; } else { const containerRect = container.getBoundingClientRect(); targetY = rect.top - containerRect.top + container.scrollTop; } } else { console.error('Invalid target for smoothScroll. Must be a number or an HTMLElement.'); return Promise.reject('Invalid target'); } targetY += offset; const distanceY = targetY - startY; let startTime = null; return new Promise((resolve) => { function animateScroll(currentTime) { if (!startTime) startTime = currentTime; const elapsedTime = currentTime - startTime; const progress = Math.min(elapsedTime / duration, 1); const easedProgress = easing(progress); const newScrollPos = startY + distanceY * easedProgress; if (container === window) { window.scrollTo(0, newScrollPos); } else { scrollElement.scrollTop = newScrollPos; } if (progress < 1) { currentScrollAnimationId = requestAnimationFrame(animateScroll); } else { currentScrollAnimationId = null; resolve(); // 動畫完成 } } currentScrollAnimationId = requestAnimationFrame(animateScroll); }); } // 示例用法： // 1. 平滑滾動到頁面頂部 // smoothScroll(0).then(() => console.log('滾動到頂部完成！')); // 2. 平滑滾動到某個元素 // const myElement = document.getElementById('some-section'); // if (myElement) { // smoothScroll(myElement, { duration: 800, offset: -20 }).then(() => { // console.log('滾動到指定元素完成！'); // }); // } // 3. 平滑滾動某個容器內部 // const scrollableDiv = document.getElementById('my-scrollable-div'); // if (scrollableDiv) { // smoothScroll(0, { container: scrollableDiv, duration: 600 }).then(() => { // console.log('div內部滾動到頂部完成！'); // }); // }
這個函數雖然看起來復雜了一點，但它提供了很高的靈活性和可維護性。在實際項目中，一個這樣封裝好的工具函數能大大提升開發效率和代碼質量。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
