1、给html,body设置高度100%,overflow设置hidden,隐藏右边滚动条
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;//隐藏右侧滚动条
position: relative;
}
.container{
height: 100%;
width: 100%;
transition: all .5s;//过渡
}
.container .item{
height: 100%;
}
ul {
z-index: 1000;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);//当定位为50%时。transform减去高度的一半,就可以使盒子居中
}
.indexes li{
list-style: none;
width: 10px;
margin: 20px;
height: 10px;
border-radius: 50%;//当设置成50%是回城一个圆
background-color: azure;
}
.indexes li.active{
background: red;
}
.left-nav{
list-style: none;
z-index: 1000;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.left-nav li{
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
color: white;
background-color: black;
}
.left-nav li.on{
background-color: red;
}
<div class="container">
<div class="item" style="background-color: rgb(252, 199, 130);">
</div>
<div class="item" style="background-color: rgb(189, 235, 152);">
</div>
<div class="item" style="background-color: rgb(149, 210, 250);">
</div>
<div class="item" style="background-color: rgb(232, 106, 236);">
</div>
<div class="item" style="background-color: rgb(247, 107, 114);">
</div>
</div>
<ul class="indexes">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="left-nav">
<li class="on">AA</li>
<li>BB</li>
<li>CC</li>
<li>DD</li>
<li>EE</li>
</ul>
2、引入jq库
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
$(function(){
//设置一个全局变量值
let i = 0
function move(e){
//鼠标滚轮事件,当wheelDelta的值小于0时,鼠标向下滚动
//当wheelDelta的值大于0时,鼠标向上滚动
//做一个判断,当鼠标向下滚动时,i+1,反之,i-1
if (e.wheelDelta<0) {
if (i===$(".item").length-1) return
i++
}else{
if (i===0) return
i--
}
//将i值乘以屏幕宽度,向上滚动
$('.container').css('transform',`translateY(-${100*i}vh)`)
//找到全部li当下标等于i值是增加active,其余兄弟元素清除active
$(".indexes li").eq(i).addClass("active").siblings().removeClass("active")
$(".left-nav li").eq(i).addClass("on").siblings().removeClass("on")
}
//鼠标滚动事件
window.onmousewheel=move
})
//当鼠标经过时右侧进度条时,滚动到对应的页面相关内容
$("indexes li").hover(function(){
let index = $(this).index()
$('.container').css('transform',`translateY(-${100*index}vh)`)
$(".indexes li").eq(index).addClass("active").siblings().removeClass("active")
$(".left-nav li").eq(index).addClass("on").siblings().removeClass("on")
})
//当点击左侧导航栏是,相同的滚动到相对应的页面
$(".left-nav li").click(function(){
let index = $(this).index()
$('.container').css('transform',`translateY(-${100*index}vh)`)
$(".left-nav li").eq(index).addClass("on").siblings().removeClass("on")
$(".indexes li").eq(index).addClass("active").siblings().removeClass("active")
})