1，前言
2，效果展示
3，屬性說明
- 3.1 scroll-snap-type
- 3.2，scroll-snap-align
4，實際使用
- 4.1，相容性

1，前言

今天摸魚的時候，發現一個很有意思的css屬性

scroll-snap-type

，屬性的解釋是：定義在滾動容器中的一個臨時點如何被嚴格的執行。聽起來有點模糊，大緻意思就是可以設定滾動容器中子元素的滾動動作，檢視了一下

MDN

文檔，我制作了一個簡單的仿

fullPage

整屏滾動的

deme

，純

css

實作。

2，效果展示

完整代碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    #main {
      width: 100vw;
      height: 100vh;
      overflow: auto;
      scroll-snap-type: y mandatory;
    }
    #main::-webkit-scrollbar {
      width: 0;
    }
    #main div {
      width: 100vw;
      height: 100vh;
      color: white;
      font-size: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      scroll-snap-align: start;
    }

    #main div:nth-child(1) {
      background-color: pink;
    }

    #main div:nth-child(2) {
      background-color: blue;
    }

    #main div:nth-child(3) {
      background-color: green;
    }
  </style>
</head>

<body>
  <main id="main">
    <div>第一頁</div>
    <div>第二頁</div>
    <div>最後一頁</div>
  </main>
</body>
</html>

3，屬性說明

主要用到了兩個屬性，設定在外部容器的

scroll-snap-type

，和設定在子元素的

scroll-snap-align

3.1 scroll-snap-type

該屬性用于設定水準滾動定位，還是垂直滾動定位，屬性值如下：

值	說明
none	無效果
x	水準軸
y	垂直軸
block	塊軸
inline	内聯軸
both	水準垂直全設定
mandatory	當滾動動作結束，強制到指定的點
proximity	當滾動動作結束，如果接近指定的點，則會貼合

文法：

scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]

3.2，scroll-snap-align

該屬性作用在滾動容器的子元素上，表示捕獲點是上邊緣，下邊緣，還是中間位置，屬性值如下：

值	說明
none	無效果
start	起始位置對齊
end	結束位置對齊
center	居中對齊

文法：

scroll-snap-align: [ none | start | end | center ]{1,2};

4，實際使用

實際使用過程中，隻需要設定如下：

#main {
   overflow: auto;
   scroll-snap-type: y mandatory;
 }
 #main div {
   scroll-snap-align: start;
 }

4.1，相容性

MDN文檔：scroll-snap-type
MDN文檔：scroll-snap-align

如果看了覺得有幫助的，我是@上進的鵬多多，歡迎點贊關注評論；END

PS：在本頁按F12，在console中輸入document.querySelectorAll('.diggit')[0].click()，有驚喜哦

公衆号

往期文章

助你上手Vue3全家桶之Vue-Router4教程
助你上手Vue3全家桶之Vue3教程
助你上手Vue3全家桶之VueX4教程
使用nvm管理node.js版本以及更換npm淘寶鏡像源
超詳細！Vue-Router手把手教程
vue中利用.env檔案存儲全局環境變量，以及配置vue啟動和打包指令
微信小程式實作搜尋關鍵詞高亮
超詳細！Vue的九種通信方式
超詳細！Vuex手把手教程

個人首頁

CSDN
GitHub
簡書
部落格園
掘金

接受失敗，但不選擇放棄！

原生css實作fullPage的整屏滾動貼合