CSS Scroll-Snap支援度:Can I Use)
容器上的属性
屬性 | 值 |
---|---|
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;
}
...