原生css實現fullPage的整屏滾動貼合
阿新 • • 發佈：2021-11-08
目錄
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手把手教程
個人主頁
接受失敗，但不選擇放棄！