#69 CSS scroll snap 做簡單的純 CSS 輪播

2025 iThome 鐵人賽

DAY 6

Modern Web

Super Easy CSS，極度簡單 PART 3！讓想像躍然於螢幕之上系列第 6 篇

17th鐵人賽 css css教學 css3 scroll-snap

Eva Chen

2025-09-20 00:12:40

17 瀏覽

分享至

以前，要做出輪播的「滾動吸附」的效果，十之八九都需要依賴 JS 套件（像是 fullPage.js 、Swiper.js 或 Slick.js）。這些工具雖然強大，但有時候只是想要一個簡單的橫向滑動，不需要複雜的自動播放或前後操作按鈕，引入一整個套件又有點太多。

現在，我們有了純 CSS 的原生解決方案，就是 CSS Scroll Snap。可以宣告滾動容器內的對齊點，當使用者滾動停止時，瀏覽器會自動產生一個平滑的動畫，將元素對齊到你指定的位置。

好的，那就讓我們來看看怎麼用吧！

本篇同步發表於我的 Hashnode 部落格：
Eva Chen | 網頁設計師下班後 (hashnode.dev)

一、Scroll Snap 的語法：容器與子項目

要實現 Scroll Snap，你需要記住一個簡單的「父子關係」：

滾動容器 (Scroll Container)：也就是外層那個可以滾動的區塊。
滾動項目 (Scroll Items)：也就是容器裡面那些要被對齊的子項目。

我們需要分別對這兩者設定 CSS 屬性。

1. 對「滾動容器」的設定 `scroll-snap-type`

這是最重要的屬性，用來開啟這個容器的滾動吸附功能，並決定吸附的方向和嚴格程度。

它的值由兩部分組成：[方向] [嚴格程度]。

方向 (Axis)：
- x: 水平方向吸附。
- y: 垂直方向吸附。
- both: 兩個方向都吸附。
嚴格程度 (Strictness)：
- mandatory: 強制吸附。
  當使用者停止滾動時，瀏覽器一定會自動對齊到某個吸附點。這很適合用在一次只顯示一個項目的輪播牆。
- proximity: 鄰近吸附。
  只有當使用者停止滾動的位置「足夠靠近」吸附點時，才會觸發對齊。如果停在離吸附點很遠的地方，就不會觸發。這比較適合用在像長篇文章，但你希望標題能盡量停在畫面頂端的場景。

範例：

.container {
    /* 設定一個水平方向、強制吸附的滾動容器 */
    scroll-snap-type: x mandatory;
}

2. 對「滾動項目」的設定 `scroll-snap-align`

這個屬性用來告訴瀏覽器，這個項目要對齊容器的哪個位置。

start: 將項目的起始邊對齊容器的起始邊。（例如水平滾動時，對齊左邊）
center: 將項目的中心點對齊容器的中心點。
end: 將項目的結束邊對齊容器的結束邊。（例如水平滾動時，對齊右邊）

範例：

.item {
    /* 讓這個項目在吸附時，總是對齊容器的正中間 */
    scroll-snap-align: center;
}

二、實戰範例：打造一個橫向滑動照片牆

那就我們來做一個最常見、最簡單的應用：一個可以左右滑動多張照片的輪播。

不過這個要讓使用者自己滑動喔！要有前後按鈕或自動播放還是要用 JS 做比較好。

HTML 結構

結構非常單純，就是一個容器 (.gallery) 包著一堆項目 (.img-container)。

<div class="gallery">
    <div class="img-container">
        <img src="image1.jpg" alt="照片一">
    </div>
    <div class="img-container">
        <img src="image2.jpg" alt="照片二">
    </div>
    <div class="img-container">
        <img src="image3.jpg" alt="照片三">
    </div>
    <div class="img-container">
        <img src="image4.jpg" alt="照片四">
    </div>
    <div class="img-container">
        <img src="image5.jpg" alt="照片四">
    </div>
</div>

CSS

/* 1. 設定滾動容器 (父) */
.gallery {
    display: flex;
    overflow-x: auto;
    width: 100%;
    
    /* 開啟水平、強制吸附 */
    scroll-snap-type: x mandatory;

    /* 為了美觀，可以隱藏醜醜的滾動條 */
    scrollbar-width: none;  /* Firefox */
    &::-webkit-scrollbar {
        display: none; /* Chrome, Safari and Opera */
    }
}



/* 2. 設定滾動項目 (子) */
.img-container {
    /* 調整寬度，固定尺寸為 300px */
    flex: 0 0 300px;
    /* 或是每次出現 2 個 */
    /* flex: 0 0 50%; */
    
    padding: 1rem;
    
    /* 讓每個項目都對齊容器的開始 */
    scroll-snap-align: start;
    
    img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 1rem;
    }
}