如何用純 css 實現頁面滾動停靠效果

效果圖

以前要實現頁面滾動停靠效果需要借助 js 來操作 dom，類似於fullpage.js插件，現在純 css 也能做到同樣的事。

scroll-snap-type

scroll-snap-type 屬性定義元素容器的滾動方式。該屬性不能作用於body標簽（我用的時候不可用）。

屬性

none | [ x | y | block | inline | both ] [ mandatory | proximity ]?

• x：x 軸；
• y：y 軸；
• both：x 軸 與 y 軸
• mandatory：可選，強制滾動，只要發生滾動就滾到下一頁；
• proximity：可選，協商滾動，滾動大半才滾動到下一頁，否則留在當前滾動點或回滾當前頁（不怎么好使）。

scroll-snap-align

scroll-snap-align屬性指定元素相對容器的滾動方向對齊方式。可以作用於容器子孫元素。

屬性

• start：頭部對齊；
• center：居中對齊；
• end：尾部對齊。

示例

html 核心代碼

<div class="container">
  <div class="box" style="background-color: brown;">內容1</div>
  <div class="box" style="background-color:blueviolet">內容2</div>
  <div class="box" style="background-color:blue;">內容3</div>
  <div class="box" style="background-color:aqua;">內容4</div>
  <div class="box" style="background-color:burlywood;">內容5</div>
</div>

css 核心代碼

.container {
  overflow: hidden auto;
  width: 100vw;
  height: 100vh;
  scroll-snap-type: y mandatory;
}

.box {
  width: 100vw;
  height: 100vh;
  scroll-snap-align: center;
}

注意事項

以上代碼在移動表現良好，在桌面端滑動略有卡頓感，需要在容器添加will-change: scroll-position屬性。