Scroll

向下捲動時頁首隱藏，向上捲動時重新出現。

在[套用位置]加入「捲動隱藏頁首」(Hide on Scroll Header)，也叫 headroom 或自動隱藏導覽列 (auto-hide navbar)。
使用者向下捲動時，頁首要向上滑出畫面；只要向上捲動，就滑回來：快速、流暢，依捲動方向而不是距離來反應。
在頁面最上方時一律顯示，忽略細微的捲動抖動，並且當頁首內有元素取得鍵盤焦點時保持顯示。

縱向捲動時，一排被固定的面板橫向移動。

在[套用位置]加入「橫向捲動區塊」(Horizontal Scroll Section)，也叫 horizontal scrolling 或 scroll-jacked horizontal gallery。
區塊到達頂端時要固定住，向下捲動時讓其中的一排面板橫向移動，最後一個面板出現後再解除固定。
橫向移動要直接跟著捲動位置，往回捲動時反向移動；在小螢幕上，或如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就改成可以正常滑動的橫排。

捲動時各圖層以不同速度移動，營造出景深感。

在[套用位置]加入「視差捲動」(Parallax) 效果，也叫 parallax scrolling 或視差圖層 (parallax layers)。
頁面捲動時，背景圖層要比內容移動得慢，越遠的圖層移動越少，營造含蓄的景深感。
讓效果緊跟捲動位置、沒有延遲，文字放在正常速度的圖層上；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就關閉這個效果。

在一段捲動範圍內，元素固定在原位，其他內容或動畫繼續推進。

在[套用位置]加入「捲動釘選」(Pinning) 效果，也叫釘選區塊 (pinned section) 或 sticky section。
旁邊的內容隨捲動經過時，一個面板要固定在原位，並隨正在閱讀的步驟切換內容，區塊結束時再解除固定。
優先使用原生的 sticky 定位，而不是攔截捲動；並確保在小螢幕上即使沒有固定面板，每個步驟也依然好讀。

隨著使用者捲動頁面或文章，進度條或圓環逐漸填滿。

在[套用位置]加入「捲動進度指示器」(Scroll Progress Indicator)，也叫閱讀進度條 (reading progress bar)。
頂端的一條細條要隨著讀者捲動的距離從左往右填滿，到結尾時佔滿整個寬度。
直接綁定捲動位置，不要有緩動延遲，也不要遮住內容。

捲動停止時會吸附到預設的位置，例如投影片或區塊。

在[套用位置]加入「捲動吸附」(Scroll Snap)，也叫 scroll snapping 或 snap scrolling。
捲動停下時，畫面要俐落地吸附到最近的區塊，讓每個區塊都對齊邊緣，而不是停在一半。
使用瀏覽器原生的吸附功能，讓滑鼠滾輪、觸控和鍵盤捲動都照常運作，並確保比畫面更高的內容也能完整閱讀。

動畫進度直接綁定捲動位置，往下捲動時播放，往回捲動時倒轉。

在[套用位置]加入「捲動連動動畫」(Scroll-Linked Animation)，也叫 scroll-driven animation 或 scroll scrub。
動畫要緊跟著捲動位置：往下捲動時正向播放，往上捲動時當場倒轉，本身不帶以時間為基礎的緩動。
把整段動畫對應到一個明確的捲動範圍；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就顯示一個合理的靜態狀態。

元素進入或離開可視區域時，動畫播放一次。

在[套用位置]加入「捲動觸發動畫」(Scroll-Triggered Animation)，也叫捲動顯現 (reveal on scroll) 或 animate on scroll。
每個元素進入畫面時只播放一次：淡入並往上滑到定位，用自己快速流暢的節奏播放，而不是跟著捲動位置。
腳本載入失敗時內容也要看得到；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示元素。

捲動和錨點跳轉帶有緩動地平滑滑動，而不是生硬地跳動。

在[套用位置]加入「平滑捲動」(Smooth Scroll)，也叫 smooth scrolling 或慣性捲動 (inertia scroll)。
捲動和錨點跳轉要順暢地滑動並緩緩停下，而不是一格一格地跳；手感要輕快靈敏，不要沉重拖泥帶水。
保留鍵盤捲動、捲軸、頁面內搜尋等原生行為；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就關閉平滑效果。

捲動時卡片固定在頂端並層層疊起，先前的卡片通常會稍微縮小。

在[套用位置]加入「堆疊卡片」(Stacking Cards)，也叫 sticky stacking cards 或 card stack scroll。
捲動時，每張卡片固定在頂端附近，下一張卡片從下方滑上來蓋住它，底下的卡片稍微縮小，疊成整齊的一疊。
讓每張先前的卡片露出一道細邊，並給最後一張卡片留足空間，讓它在區塊結束前滑到定位。

使用者往下捲動後，固定頁首的高度或尺寸會縮小。

在[套用位置]加入「固定頁首縮小」(Sticky Header Shrink)，也叫 shrinking header 或 shrink on scroll。
頁首固定在頂端，讀者稍微往下捲動後，平順地縮成更窄的橫條、Logo 也變小；回到頂端時再恢復原狀。
頁首尺寸變化時，不要讓下方內容跳動。

頁面縱向捲動時，大字級的文字列橫向滑動。

在[套用位置]加入「捲動文字跑馬燈」(Text Marquee on Scroll)，也叫 scroll text marquee 或 scroll velocity text。
頁面往下捲動時，大字級的文字列橫向滑動，相鄰的列朝相反方向移動；往上捲動時再滑回來。
讓移動綁定捲動位置，別讓長文字列產生水平捲軸；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就保持靜止。

隨著使用者捲動，元素或場景放大或縮小。

在[套用位置]加入「捲動縮放」(Zoom on Scroll) 效果，也叫 scroll zoom 或 scale on scroll。
區塊停留在畫面中時，元素要隨著捲動從一張小卡片平順放大，直到佔滿整個畫面；往上捲動時再縮回去。
縮放時不要推擠周圍的版面；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接以最終尺寸顯示，不做縮放。