Horizontal Scroll Section (橫向捲動區塊)

投影片在可視區域內水平移動，每次吸附一張到定位。

在[套用位置]加入「輪播滑動」(Carousel Slide)，也叫滑桿 (slider) 或滑動輪播 (swipe carousel)。
每一步都讓整排橫向滑動，使下一張投影片吸附到中間，平順減速；兩側邊緣露出相鄰的投影片，位置圓點也跟著變化。
每次只移動一張，除了按鈕和方向鍵，也支援觸控滑動，並替控制項加上給螢幕閱讀器讀取的標籤。

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

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

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

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

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

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

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

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

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

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