一个父级div包裹4个子级div，4个子盒子的宽高占满当前屏幕，滚动导航条自动切换到下一页/上一页
1、HTML代码
<style>
* {
margin: 0;
padding: 0;
}
.container {
height: 100vh;
overflow-y: scroll;
}
.container div {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div class="container">
<div class="box" style="background-color: antiquewhite;">
<h1>第一页</h1>
</div>
<div class="box" style="background-color: chartreuse;">
<h1>第二页</h1>
</div>
<div class="box" style="background-color: coral;">
<h1>第三页</h1>
</div>
<div class="box" style="background-color: deeppink;">
<h1>第四页</h1>
</div>
</div>2、父盒子添加scroll-snap-type属性文章来源：https://www.toymoban.com/news/detail-561535.html
.container {
height: 100vh;
overflow-y: scroll;
/*
添加属性：
参数1：x/y，确定沿哪条轴进行滚动
参数2mandatory： 检测距离大于某个程度，就进行滚动到下一屏
*/
scroll-snap-type: y mandatory;
}3、子盒子添加scroll-snap-align属性文章来源地址https://www.toymoban.com/news/detail-561535.html
.container div {
width: 100%;
height: 100vh;
/*
第三步：给子盒子添加属性
可选值：
start：开始部分
end：结束部分
center：中间部分
*/
scroll-snap-align: start;
}到了这里，关于HTML案例：全屏切换滚动效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
