【Day20】流暢滾動的魔法 - CSS scroll-snap

15th鐵人賽

卡羅奇奇

2023-10-05 23:42:31

685 瀏覽

分享至

CSS scroll-snap

CSS Scroll-Snap支援度:Can I Use)

CSS Scroll-snap是什麼?

Scroll Snap可以讓你在滾動容器中定義滾動位置，使滾動到特定位置時會自動吸附停止。
Scroll Snap經常用於輪播、圖片庫或任何需要在滾動期間捕捉特定位置的狀況。

容器上的属性

屬性	值
`scroll-snap-type`	容器的定義滾動類別屬性，值有`mandatory`強制滾動捕捉，確保容器總是停在捕捉點;以及`proximity`建議瀏覽器應該捕捉到最近的捕捉點，但不強制執行。ex: `scroll-snap-type: x mandatory; /* 用於水平滾動 */`
`scroll-padding`	定義滾動視窗的內邊距，也可以分開寫`scroll-padding-left`、`scroll-padding-right`、`scroll-padding-top`、`scroll-padding-bottom`

子元素上的属性

屬性	值
`scroll-snap-align`	用於子元素定義捕捉點，`start`（容器將捕捉到元素的開始處）、`end`（捕捉到元素的結束處）、`center`（捕捉到元素的中心），或 none（不捕捉）。
`scroll-margin`	定義元素的滾動位置外邊距，也可以分開寫`scroll-margin-left`、`scroll-margin-right`、`scroll-margin-top`、`scroll-margin-bottom`
`scroll-snap-stop`	定義在觸控裝置上，滾動位置是否可以超過定義好的吸附位置，`normal`可以超過吸附位置，`always`不可超過吸附位置。

以下為範例:
template

<div id="app">
    <div class="btn_container">
      <a href="#section_A">A</a>
      <a href="#section_B">B</a>
      <a href="#section_C">C</a>
    </div>
    <div class="scroll_container">
      <section id="section_A">A</section>
      <section id="section_B">B</section>
      <section id="section_C">C</section>
    </div>
</div>

style

...
.scroll_container{
  ...
  overflow-y: scroll;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}
section{
  ...
  scroll-snap-align: start;
}
...