如何用JS实现页面的全屏滚动

全屏滚动

说白了就是：每张图都占满整个浏览器窗口，当滑动鼠标或者触摸板时，图片切换。

主要使用的方法

addEventListener() 方法用于向指定元素添加监听事件。

Mousewheel 鼠标滚轮。

我们需要用addEventListener() 方法，来监听到 Mousewheel 的滚动 。然后通过点击小圆点再去实现图片的切换效果。

实现效果展示

 

那么废话不多说直接上代码，这些图片在（极简壁纸）

 HTML部分

 <div class="container">
        <div class="section section1">
            <h1>第1屏</h1>
        </div>
        <div class="section section2">
            <h1>第2屏</h1>
        </div>
        <div class="section section3">
            <h1>第3屏</h1>
        </div>
        <div class="section section4">
            <h1>第4屏</h1>
        </div>
        <div class="section section5">
            <h1>第5屏</h1>
        </div>
    </div>
    <ul class="controls">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

CSS部分

   <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .container {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            transition: all 0.3s ease;
        }


        .section1 {
            /* background-color: rebeccapurple; */
            background: url(./img/1.png);

        }

        .section2 {
            /* background-color: skyblue; */
            background-image: url(./img/2.png);
            /* background: url(./img/2.png); */

        }

        .section3 {
            /* background-color: red; */
            background: url(./img/3.png);

        }

        .section4 {
            /* background-color: orange; */
            background: url(./img/4.png);

        }

        .section5 {
            /* background-color: lightgreen; */
            background: url(./img/5.png);

        }

        .section {
            width: 100%;
            height: 100%;
            display: flex;
            color: #83a78d;
            justify-content: center;
            align-items: center;
            background-size: cover;
        }

        .controls {
            position: absolute;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            list-style: none;
        }

        .controls li {
            width: 50px;
            height: 50px;
            font: bold 22px/50px '楷体';
            text-align: center;
            background-color: #8869A5;
            color: #B1BEEA;
            cursor: pointer;
            border-radius: 50%;
        }

        .controls li+li {
            margin-top: 5px;
        }

        .controls li.active {
            background-color: #fff;
            color: red;
        }

JS部分

<script>
        //实现滚动效果
        const container = document.querySelector('.container')
        const lis = document.querySelectorAll('.controls li')
        var viewHeight = null //声明页面高度

        var index = 0; //当前索引
        var flag = true; //节流开关
        document.addEventListener('mousewheel', function (e) {
            e = e || window.event
            // console.log(e);
            e.preventDefault()
            // 获取整屏的高度
            viewHeight = document.body.clientHeight;
            if (flag) {  //节流阀
                flag = false
                if (e.wheelDelta > 0) {
                    index--
                    if (index < 0) {
                        index = 0
                    }
                } else {
                    index++;
                    if (index > lis.length - 1) {
                        index = lis.length - 1
                    }
                }
                container.style.top = -index * viewHeight + 'px'
                changeColor(index)
                    // 为了防止用户一直触发这个事件，通过定时器来防止
                setTimeout(function () {
                    flag = true
                }, 500)
            }

        },{ passive: false, useCapture: false })
        //绑定点击事件
        for (let i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                viewHeight = document.body.clientHeight
                index = i
                changeColor(index)
                container.style.top = -index * viewHeight + 'px'
            }
        }
        //改变小li颜色
        function changeColor(index) {
            for (var j = 0; j < lis.length; j++) {
                lis[j].className = ''
            }
            lis[index].className = 'active'
        }
    </script>