效果
兩句css代碼實作全屏滾動效果
兩句css代碼實作全屏滾動效果-demo案例 html代碼
<body>
<div class="container">
<section>
<h3>第一屏内容</h3>
<p>
在父容器上使用scroll-snap-type 屬性 <br>
第一個參數y 是y軸捕捉位置 <br>
mandatory 超過距離則自動滾動到下一個容器 <br>
scroll-snap-type:y mandatory <br>
在需要滾動的容器上使用 scroll-snap-align 屬性 <br>
start 開始部分 end 結束部分 center 中間部分 <br>
scroll-snap-align:start; <br>
</p>
</section>
<section>
<h3>第二屏内容</h3>
<p>
在父容器上使用scroll-snap-type 屬性 <br>
第一個參數y 是y軸捕捉位置 <br>
mandatory 超過距離則自動滾動到下一個容器 <br>
scroll-snap-type :y mandatory <br>
在需要滾動的容器上使用 scroll-snap-align 屬性 <br>
start 開始部分 end 結束部分 center 中間部分 <br>
scroll-snap-align:start; <br>
</p>
</section>
<section>
<h3>第三屏内容</h3>
<p>
在父容器上使用scroll-snap-type 屬性 <br>
第一個參數y 是y軸捕捉位置 <br>
mandatory 超過距離則自動滾動到下一個容器 <br>
scroll-snap-type :y mandatory <br>
在需要滾動的容器上使用 scroll-snap-align 屬性 <br>
start 開始部分 end 結束部分 center 中間部分 <br>
scroll-snap-align:start; <br>
</p>
</section>
</div>
</body>
css代碼
<style>
body {
margin: 0;
}
.container {
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
section {
box-sizing: border-box;
padding: 112px;
height: 100%;
color: white;
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;
}
</style>
![用HTML5+CSS3畫一個簡易的機器貓頭像[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)