页面滚动

CSS部分

    * {
        padding: 0;
        margin: 0;
    }

    body {
        height: 100vh;
        overflow: hidden;
    }

    .container {
        transform: translateY(0vh); //通过JS改变其样式
        transition: 0.5s; //设置过度效果
    }

    .container div {
        height: 100vh;
    }

div部分

 <div class="container">
    <div style="background: silver;"></div>
    <div style="background: blue;"></div>
    <div style="background: aqua;"></div>
    <div style="background: saddlebrown;"></div>
</div>

js部分

  let i = 0
    let container = document.querySelector('.container')
    let endTime = new Date()//获取当前时间赋值给endeTime
    window.onmousewheel = e => {//js滚轮事件 onmousewheel
        if (new Date() - endTime < 500) return; // 重新获取当前的时间 减去之前获取的时间 小于500ms 那么就结束 不走下面的执行语句 

        if (e.wheelDeltaY < 0) { //超过500ms 那么判断鼠标滚动的方向 如果鼠标滚轮向下滑动 那么i++ 当i=4 那么结束语句
            if (i === 4) return
            i++

        } else {
            if (i === 0) return;
            i--

        }
        container.style.transform = `translateY(-${i*100}vh)` //把i乘100 来改变方向
        endTime = new Date() //把当前时间重新赋值给endtTime



    }