滾動捕捉

滾動吸附(Scroll snapping)是指當滾動操作結束時,內容會“吸附”到一個特定的位置,而不是停在任意一個點。普通的滾動操作缺乏精確性,它們不會自動與段落、句子或影像的邊界對齊。例如,在輪播圖中,滾動操作可能會在影像中間結束,導致影像部分可見。長期以來,Web 開發者一直依賴於基於 JavaScript 的解決方案。最近,瀏覽器開始支援 CSS 滾動吸附特性,它允許定義滾動吸附容器和吸附行為。

滾動吸附是一種控制良好的滾動體驗,開發者可以將一個元素定義為滾動容器,併為滾動操作設定邊界。然後,滾動操作會在這些吸附位置邊界處結束,滾動到的內容會吸附到位。在上述輪播圖的例子中,當用戶結束滾動輪播圖時,其可見的影像就會吸附到位。

滾動吸附容器

滾動吸附容器(scroll snap container)是一個應用了滾動吸附的滾動容器。例如,如果一個盒子有溢位內容,並且其 scroll-snap-type 屬性值不為 none,那麼這個盒子就會捕獲吸附位置。一個盒子的滾動吸附容器是其最近的、捕獲吸附位置的滾動容器祖先。如果一個盒子沒有滾動吸附容器,那麼它的吸附位置(即使有)也不會觸發吸附效果。

吸附口

吸附口(snapport)是滾動埠中用於在計算吸附位置時作為滾動吸附區域的對齊容器的區域。預設情況下,它與滾動容器的可視視口相同,但它也可以是由 scroll-padding 屬性定義的滾動埠區域。吸附區域會對齊到吸附口。

吸附區域

滾動容器中元素的吸附區域(snap area)是由該元素上指定的 scroll-margin 外邊距定義的區域。吸附區域用於將元素吸附到其吸附口。

吸附目標

滾動吸附容器內的一個後代元素,當容器滾動時,該元素會被吸附。 scroll-snap-align 屬性定義了每個吸附目標的吸附位置。