Use native JS to achieve the wheel page turning effect

First, the wheel event

When the user interacts with the page with the mousewheel to scroll vertically, the mousewheel event is triggered, which is used to achieve the full-screen switch effect. Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Opera 10+, and Safari 5+ all provide the mousewheel event, while Firefox 3.5+ provides an equivalent event: DOMMouseScroll. We also use another special property in the Event object corresponding to the MouseWheel event – the wheelDelta property.

1. Value of the “event. WheelDelta” attribute in the “MouseWheel” event: the returned value, if it is positive, indicates that the wheel is rolling up; if it is negative, indicates that the wheel is rolling down; The returned values are all multiples of 120, that is: amplitude = returned value / 120.

2. Value of the “event.detail” property in the “DOMMouseScroll” event: the returned value, if negative, indicates that the wheel is scrolling up (as opposed to “event.wheelDelta”), if positive, indicates that the wheel is scrolling down; The returned values are all multiples of 3, that is, the magnitude = returned value / 3.

Two, achieve the effect

Iii. Source code

<! 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>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            overflow: hidden;
        }
        .container {
            transition: .5s;
        }
        .item {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item" style="Background - color: RGB (255255, 0)"></div>
        <div class="item" style="background-color: rgb(255, 145, 0)"></div>
        <div class="item" style="background-color: rgb(0, 17, 255)"></div>
        <div class="item" style="background-color: rgb(0, 255, 136)"></div>
    </div>
    <script src="sun.js"></script>
    <script src='https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js'></script>
    <script>
        $(() => {
            let i = 0;
            let move = sun.throttle(e => {
                if(e.wheelDelta < 0) {
                    if( i === $(".item").length - 1) return ;
                    i++;
                } else {
                    if( i === 0) return;
                    i--;
                }
                $(".container").css("transform",`translateY(-${i*100}vh)`); }, 500); window.onmousewheel = move; }) </script> </body> </html>Copy the code

Throttle (); throttle();

    function throttle(fn,wait) {
        let endTime = 0;
        return function() {
            if(new Date() - endTime < wait) return; fn.apply(this,arguments); endTime = new Date(); }},Copy the code