1.HTML代码:
<main>
<div class="container">
<div class="page">Page1</div>
<div class="page">Page2</div>
<div class="page">Page3</div>
</div>
</main>
2.JS代码:
wheel:设置滚轮事件
deltaY:鼠标滚轮往上移动,deltaY则为负,反之则为正
scrollLeft表示图片向左移动 例如:加上负的就代表向右移动
<script>
let container=document.querySelector(".container");
container.addEventListener("wheel",(event)=>{
event.preventDefault();
container.scrollLeft+=event.deltaY;
})
</script>
3.CSS代码:
1.nth-child(n) 代表父元素下的第n个子类
2.通过设置不同子类间的移动差值来实现页面移动
<style>
.container{
display: flex;
overflow-x:scroll;
}
.page{
width:100vw;
height:100vh;
flex-shrink:0;
}
.page:nth-child(1){
background:purple;
deltaY:140deg;
}
.page:nth-child(2){
background:yellow;
deltaY:210deg;
}
.page:nth-child(3){
background:green;
deltaY:270deg;
}
</style>