最近研究CSS的時候發(fā)現(xiàn)了 僅使用兩個CSS屬性就可以制作出全屏滾動效果 ，這兩個屬性就是：
- scroll-snap-type
- scroll-snap-align
使用它就可以實現(xiàn) fullpage.js 這種全屏滾動效果，其實，這種全屏滾動效果的理論非常簡單，就是使用js監(jiān)聽界面滾動，當界面滾動到某個值時就讓界面持續(xù)滾動到下一個屏幕，但是！要考慮到屏幕尺寸大小帶來的兼容性問題就是一件非常麻煩的事情。
今天說的這兩個屬性并不能替代 fullpage.js ，有下面2個原因：
- 它們在瀏覽器上面存在兼容性問題。
- CSS屬性無法監(jiān)聽事件，也就無法提供動畫完成時的回調函數(shù)。
1. 兼容性
目前主流的瀏覽器都已經(jīng)支持了這兩個CSS屬性，可以放心的使用。如果你需要兼容IE瀏覽器，那么請選擇 fullpage.js 。
2. 使用
使用的方法其實很簡單， scroll-snap-type 屬性放在 需要全屏滾動的容器的父容器上 ，而 scroll-snap-align 則需要 放在全屏滾動的容器上 ，多說無益，我們直接來看一下代碼就可以很清楚的知道如何使用這兩個CSS屬性。
整個網(wǎng)頁的完整代碼很簡單，下面直接將它貼上來：
<!DOCTYPE html>
<html lang="zh">
<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 scroll snap</title>
<style>
body {
margin: 0;
}
.container {
height: 100vh;
overflow-y: scroll;
/* 在父容器上面使用 scroll-snap-type 屬性 */
scroll-snap-type: y mandatory;
}
section {
padding: 112px;
height: calc(100vh - 224px);
color: white;
/* 在需要滾動的容器上使用 scroll-snap-align 屬性 */
scroll-snap-align: start;
}
section:nth-of-type(1) {
background-color: #60af15;
}
section:nth-of-type(2) {
background-color: #158baf;
}
section:nth-of-type(3) {
background-color: #af1581;
}
section h3 {
font-size: 48px;
}
section p {
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<section>
<h3>A subtitle lives here</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
deleniti dignissimos ducimus expedita iure maxime qui rerum veniam
voluptatibus. Accusamus asperiores assumenda atque consectetur
consequuntur culpa cum deserunt dicta distinctio error excepturi fuga
ipsa iste magnam modi nobis, obcaecati, pariatur perspiciatis placeat
quo quod reiciendis repudiandae saepe soluta tempora unde vel? Aliquam
exercitationem iste maiores placeat reprehenderit voluptates
voluptatum. Ad at commodi culpa cumque debitis delectus dolorum, eius
error et explicabo harum in ipsum iste labore laborum libero magni
maiores nam non nostrum nulla officia pariatur quam quasi quia quo
recusandae reprehenderit saepe similique vel vero vitae voluptas
voluptatem! Quibusdam.
</p>
</section>
<section>
<h3>A subtitle lives here</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
deleniti dignissimos ducimus expedita iure maxime qui rerum veniam
voluptatibus. Accusamus asperiores assumenda atque consectetur
consequuntur culpa cum deserunt dicta distinctio error excepturi fuga
ipsa iste magnam modi nobis, obcaecati, pariatur perspiciatis placeat
quo quod reiciendis repudiandae saepe soluta tempora unde vel? Aliquam
exercitationem iste maiores placeat reprehenderit voluptates
voluptatum. Ad at commodi culpa cumque debitis delectus dolorum, eius
error et explicabo harum in ipsum iste labore laborum libero magni
maiores nam non nostrum nulla officia pariatur quam quasi quia quo
recusandae reprehenderit saepe similique vel vero vitae voluptas
voluptatem! Quibusdam.
</p>
</section>
<section>
<h3>A subtitle lives here</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
deleniti dignissimos ducimus expedita iure maxime qui rerum veniam
voluptatibus. Accusamus asperiores assumenda atque consectetur
consequuntur culpa cum deserunt dicta distinctio error excepturi fuga
ipsa iste magnam modi nobis, obcaecati, pariatur perspiciatis placeat
quo quod reiciendis repudiandae saepe soluta tempora unde vel? Aliquam
exercitationem iste maiores placeat reprehenderit voluptates
voluptatum. Ad at commodi culpa cumque debitis delectus dolorum, eius
error et explicabo harum in ipsum iste labore laborum libero magni
maiores nam non nostrum nulla officia pariatur quam quasi quia quo
recusandae reprehenderit saepe similique vel vero vitae voluptas
voluptatem! Quibusdam.
</p>
</section>
</div>
</body>
</html>
可以看到代碼并不復雜，下面我們就著重講解一下這兩個CSS屬性。
3. scroll-snap-type
該CSS屬性擁有下面這些值：
none：當這個滾動容器的可視的 viewport 是滾動的，不做任何處理。
- x ：滾動容器只捕捉其水平軸上的捕捉位置。
- y ：滾動容器只捕捉其垂直軸上的捕捉位置。
- block：滾動容器僅捕捉到其塊軸上的捕捉位置。
- inline：滾動容器僅捕捉到其內聯(lián)軸上的捕捉位置。
- both：滾動容器會獨立捕捉到其兩個軸上的位置（可能會捕捉到每個軸上的不同元素）。
- mandatory ：如果滾動容器被滾動，那么它超過臨界值后會自動滾動到下個容器上。
- proximity ：如果滾動容器被滾動，那么它超過臨界值后不會自動滾動到下個容器上。
其中需要注意的就是上面粗體標注的幾個屬性，使用 mandatory 就是全屏滾動， 則當滾動過一定閾值后，會自動滾動到下一屏幕，如果沒有滾動過某一閾值，則回彈。
而 proximity 不一樣的是： 滾動過一定閾值后，就可以正常進行滾動（而 mandatory 是直接進入下一屏），如果沒有滾動過某一閾值，則回彈。
理解這兩個屬性其實非常簡單，將上面的代碼改改自己體驗下就明白了。
注：使用 mandatory ，如果 滾動容器的高度已經(jīng)大于屏幕的高度時 需要慎用，因為可能會導致有一部分內容因為強制滾屏的原因導致閱讀起來非常困難。
4. scroll-snap-align
該CSS屬性擁有下面這些值：
none：該容器不會進行定義在父容器上面對應軸的捕捉。 start：該容器被捕捉的位置是該容器開始的部分。 end：該容器被捕捉的位置是該容器結束的部分。 center：該容器被捕捉的位置是該容器中間的部分。
用一張圖可以很形象的明白這些屬性所代表的容器位置：
5. 最后
因為我看到 scroll-snap 的 其它屬性大部分都存在很嚴重的兼容性問題 ，所以就不在這里細講了，如果有興趣的話可以到 CSS Scroll Snap 直接查看，不過使用上面的這兩個屬性其實已經(jīng)完全夠用了。
參考文章：
scroll-snap-align MDN
scroll-snap-type MDN
Practical CSS Scroll Snapping
到此這篇關于CSS實現(xiàn)fullpage.js全屏滾動效果的示例代碼的文章就介紹到這了,更多相關CSS全屏滾動內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
