两句css代码实现全屏滚动效果-demo案例
效果
两句css代码实现全屏滚动效果
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>