两行js代码实现页面横向滚动

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>