滾動捕捉的基本概念 - CSS

CSS 滾動捕捉的關鍵屬性

在定義滾動捕捉之前，你需要在滾動容器上啟用滾動。你可以透過確保滾動容器具有確定的大小並啟用了 overflow 來實現這一點。

然後，你可以透過使用以下兩個關鍵屬性在滾動容器上定義滾動捕捉：

scroll-snap-type：使用此屬性，你可以定義可滾動視口是否可以被捕捉，捕捉是必需的還是可選的，以及捕捉應該發生在哪個軸上。
scroll-snap-align：此屬性設定在滾動容器的每個子元素上，你可以使用它來定義每個子元素的捕捉位置，或者不進行捕捉。
scroll-snap-stop：此屬性確保子元素在滾動過程中被捕捉到，而不會被滑過。
scroll-margin：此屬性可以設定在滾動時被捕捉的子元素上，以從定義的框中建立一個外邊距。
scroll-padding：此屬性可以設定在滾動容器上，以建立一個捕捉偏移量。

下面的示例演示了沿垂直軸的滾動捕捉，這由 scroll-snap-type 定義。此外，scroll-snap-align 應用於 <section> 元素的所有子元素，指示每個子元素的滾動應在何處停止。

html

<article class="scroller">
  <section>
    <h2>Section one</h2>
  </section>
  <section>
    <h2>Section two</h2>
  </section>
  <section>
    <h2>Section three</h2>
  </section>
</article>

body {
  font: 1.2em / 1.5 sans-serif;
}

.scroller {
  border: 4px solid #333333;
  width: 300px;
}

.scroller section {
  min-height: 100%;
  padding: 10px;
}

.scroller section:nth-child(odd) {
  background-color: #cccccc;
}

css

.scroller {
  height: 300px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.scroller section {
  scroll-snap-align: start;
}

使用 scroll-snap-type

scroll-snap-type 屬性需要知道滾動捕捉髮生的軸。這可以是 x、y，或邏輯對映的 block 或 inline。你也可以使用關鍵字 both 來使滾動捕捉在兩個軸上都起作用。

你還可以傳入關鍵字 mandatory 或 proximity。mandatory 關鍵字告訴瀏覽器，無論滾動位置在哪裡，內容必須捕捉到某個點。proximity 關鍵字意味著內容可能會捕捉到該點，但不是必須的。

使用 mandatory 可以建立非常一致的滾動體驗——你知道瀏覽器總會捕捉到每個定義的點。這意味著你可以確信，你期望在螢幕頂部的內容在滾動結束時會出現在那裡。然而，如果內容比你預期的要大，這可能會導致問題——使用者可能會發現自己陷入無法滾動並檢視內容的某個點的沮喪境地。因此，應仔細考慮使用 mandatory，並且僅在你知道螢幕或可滾動部分上任何時候有多少內容的情況下使用。

注意：如果你的某個子元素中的內容會溢位父容器，切勿使用 mandatory，因為使用者將無法將溢位的內容滾動到檢視中。

proximity 值僅在子元素靠近某個位置時才將其捕捉到該位置，具體距離由瀏覽器決定。點選“播放”以在 MDN Playground 中編輯下面的示例。在 mandatory 和 proximity 之間切換 scroll-snap-type 的值，以檢視這對滾動體驗的影響。

html

<article class="scroller">
  <section>
    <h2>Section one</h2>
    <p>
      Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
      kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
      winter purslane kale. Celery potato scallion desert raisin horseradish
      spinach carrot soko.
    </p>
  </section>
  <section>
    <h2>Section two</h2>
    <p>
      Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
      kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
      winter purslane kale. Celery potato scallion desert raisin horseradish
      spinach carrot soko.
    </p>
  </section>
  <section>
    <h2>Section three</h2>
    <p>
      Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
      kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
      winter purslane kale. Celery potato scallion desert raisin horseradish
      spinach carrot soko.
    </p>
  </section>
</article>

body {
  font: 1.2em / 1.5 sans-serif;
}

.scroller {
  border: 4px solid #333333;
  width: 300px;
}

.scroller section {
  min-height: 100%;
  padding: 10px;
}

.scroller section:nth-child(odd) {
  background-color: #cccccc;
}

css

.scroller {
  height: 300px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.scroller section {
  scroll-snap-align: start;
}

在上面的示例中，滾動容器上同時設定了 height: 300px; 和 overflow-y: scroll;。如果內容沒有溢位其容器，就沒有什麼可以滾動的了。

使用 scroll-snap-align

scroll-snap-align 屬性的有效值包括 start、end、center 和 none。這些值用於指示內容應捕捉到滾動容器中的哪個點。點選下面示例中的“播放”，並更改 scroll-snap-align 的值，以檢視這對滾動行為有何改變。

<article class="scroller">
  <section>
    <h2>Section one</h2>
    <p>
      Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
      kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
      winter purslane kale. Celery potato scallion desert raisin horseradish
      spinach carrot soko.
    </p>
  </section>
  <section>
    <h2>Section two</h2>
    <p>
      Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
      kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
      winter purslane kale. Celery potato scallion desert raisin horseradish
      spinach carrot soko.
    </p>
  </section>
  <section>
    <h2>Section three</h2>
    <p>
      Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
      kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
      winter purslane kale. Celery potato scallion desert raisin horseradish
      spinach carrot soko.
    </p>
  </section>
</article>

body {
  font: 1.2em / 1.5 sans-serif;
}

.scroller {
  border: 4px solid #333333;
  width: 300px;
}

.scroller section {
  min-height: 100%;
  padding: 10px;
}

.scroller section:nth-child(odd) {
  background-color: #cccccc;
}

css

.scroller {
  height: 200px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.scroller section {
  scroll-snap-align: start;
}

如果 scroll-snap-type 是 mandatory，並且子元素上的 scroll-snap-align 設定為 none 或未設定（在這種情況下，它預設為 none），使用者將無法將該元素滾動到檢視中。

使用 scroll-padding

當使用 start 或 end 時，如果你不希望內容正好捕捉到滾動容器的邊緣，或者當使用 center 時，你希望捕捉位置與中心稍微偏移，請使用 scroll-padding 屬性或其等效的普通值來新增一些內邊距。

在下面的示例中，scroll-padding 設定為 50px。當內容捕捉到第二和第三部分的開頭時，滾動在距離該部分開頭 50 畫素處停止。嘗試更改 scroll-padding 的值，以檢視這對距離有何影響。

html

<article class="scroller">
  <section>
    <h2>Section one</h2>
  </section>
  <section>
    <h2>Section two</h2>
  </section>
  <section>
    <h2>Section three</h2>
  </section>
</article>

body {
  font: 1.2em / 1.5 sans-serif;
}

.scroller {
  border: 4px solid #333333;
  width: 300px;
}

.scroller section {
  min-height: 100%;
  padding: 10px;
}

.scroller section:nth-child(odd) {
  background-color: #cccccc;
}

css

.scroller {
  height: 300px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-padding: 50px;
}

.scroller section {
  scroll-snap-align: start;
}

如果你有一個固定定位的元素（如導航欄），它可能會與滾動的內容重疊，那麼這個屬性可能很有用。透過使用 scroll-padding，你可以為固定元素保留空間，如下面的示例所示，其中 <h1> 元素在內容在其下方滾動時保持在螢幕上。如果沒有內邊距，標題在捕捉髮生時會與部分內容重疊。

<article class="scroller">
  <h1>Sticky Heading</h1>
  <section>
    <h2>Section one</h2>
  </section>
  <section>
    <h2>Section two</h2>
  </section>
  <section>
    <h2>Section three</h2>
  </section>
</article>

body {
  font: 1.2em / 1.5 sans-serif;
}

.scroller {
  border: 4px solid #333333;
  width: 300px;
}

.scroller section {
  min-height: 100%;
  padding: 10px;
}

.scroller section:nth-child(odd) {
  background-color: #cccccc;
}

css

.scroller h1 {
  position: sticky;
  top: 0;
  min-height: 40px;
  background-color: black;
  color: white;
  margin: 0;
  padding: 0;
}

.scroller h2 {
  margin: 0;
  padding: 0;
}

.scroller {
  height: 300px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-padding: 50px;
}

.scroller section {
  scroll-snap-align: start;
}

使用 scroll-margin

scroll-margin 屬性或 scroll margin 的普通值可以設定在子元素上，定義一個從其盒模型邊界向外的偏移。這允許為不同的子元素設定不同大小的空間，並且可以與父元素上的 scroll-padding 結合使用。

<article class="scroller">
  <section>
    <h2>Section one</h2>
  </section>
  <section>
    <h2>Section two</h2>
  </section>
  <section>
    <h2>Section three</h2>
  </section>
</article>

body {
  font: 1.2em / 1.5 sans-serif;
}

.scroller {
  border: 4px solid #333333;
  width: 300px;
}

.scroller section {
  min-height: 100%;
  padding: 10px;
}

.scroller section:nth-child(odd) {
  background-color: #cccccc;
}

css

.scroller {
  height: 300px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.scroller section {
  scroll-snap-align: start;
  scroll-margin: 40px;
}

使用 scroll-snap-stop

使用 scroll-snap-stop 屬性，你可以指定滾動是否必須捕捉到定義的捕捉點。在上面的示例中，這意味著滾動將在每個部分的開頭停止，或者能夠跳過某些部分。

透過此屬性定義，你可以確保使用者看到滾動區域的每個部分，而不會意外地滑過它們。然而，此設定也可能透過阻止使用者快速滾動到他們想要的內容而對使用者體驗產生負面影響。

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025 年 8 月 13 日⁩，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題