整屏滚动效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            height: 100vh;
            overflow: hidden;//去除滚动条
        }
        .main div {
            width: 100vw;
            height: 100vh;
        }
        .main{
            transform: translateY(0vh);
            transition: 0.5s;
        }


    </style>
</head>

<body>
    <div class="main">
        <div style="background-color: royalblue;"></div>
        <div style="background-color: rgb(93, 206, 200);"></div>
        <div style="background-color: rgb(225, 201, 65);"></div>
        <div style="background-color: rgb(87, 219, 54);"></div>
        <div style="background-color: rgb(235, 122, 191);"></div>
    </div>

    <script>
        let main = document.querySelector('.main')
        let i = 0 
        let endTime = new Date()

        window.onmousewheel = e => {
            // console.log(e.wheelDeltaY);
            if(new Date()-endTime<500) return;//多次滚动只能算一次
            if (e.wheelDeltaY<0) {
                if(i===4) return;
                i++
            }else{
                if(i===0) return;
                i--
            }
            main.style.transform = `translateY(-${i*100}vh)` //整屏上下移
        }
    </script>



</body>

</html>

你可能感兴趣的:(整屏滚动效果)