全屏滚动/整屏滚动

好久没更新了，今天做个简单的案例：全屏滚动。
效果是这样的：鼠标滚轮滚一次，页面就能走一整屏。

---

思路：
全屏滚动和点击切换的轮播图很相似，我们可以把全屏滚动想象成竖向的轮播图。只不过轮播图点击的按钮变成了鼠标滚轮的上划或者下划，根据鼠标滚轮的操作，进行向下移动一整屏或者向上移动一整屏。我们同样需要一个大盒子装下我们的几个模块，还需要一个包着大盒子的框子，接下来我们就开始操作吧！

---

主页
html代码

<ul id="nav">
        <li><a href="./全屏滚动.html#0">第一屏</a></li>
        <li><a href="./全屏滚动.html#1">第二屏</a></li>
        <li><a href="./全屏滚动.html#2">第三屏</a></li>
        <li><a href="./全屏滚动.html#3">第四屏</a></li>
    </ul>

---

跳转页
html代码

 <!-- 设置一个导航栏 -->
    <div class="navWrap">
        <ul id="nav">
            <li><a href="index.html">首页</a></li>
            <li class="navLi select">第一屏</li>
            <li class="navLi">第二屏</li>
            <li class="navLi">第三屏</li>
            <li class="navLi">第四屏</li>
        </ul>
    </div>
    <!-- 最外层包着的大盒子 -->
    <div id="wrap">
        <ul id="box">
            <li class="minBox">第一屏</li>
            <li class="minBox">第二屏</li>
            <li class="minBox">第三屏</li>
            <li class="minBox">第四屏</li>
        </ul>
    </div>

css代码

        /* 清除默认样式 */
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
            color: black;
        }

        /* 外面包着的大盒子 */
        #wrap {
            position: relative;
            /* 设置它的宽和高，都是占满一整屏 */
            width: 100%;
            height: 100vh;
            /* 设置超出的部分隐藏 */
            overflow: hidden;
        }

        /* 装内容的盒子 */
        #box {
            /* 只设置宽，高由内容撑开 */
            width: 100%;
            position: absolute;
            top: 0;
            /* 给一张背景图，也可以分别给每一屏设置背景图或者背景色 */
            background: url(../../灰猫/img/birdsbg.png) no-repeat center/100% 100%;
            /* 设置过渡 */
            transition: all 1s;
        }

        /* 给每一屏设置宽高 */
        .minBox {
            width: 100%;
            height: 100vh;
            line-height: 100vh;
            text-align: center;
            font-size: 120px;
            font-weight: 700;
            color: yellow;
            transition: all .4s;
        }

        /* 导航栏设置 */
        .navWrap{
            width: 100%;
            height: 30px;
            background: white;
            position: fixed;
            top: 0;
            z-index: 999;
        }
        #nav{
            width: 1200px;
            height: 100%;
            margin: 0 auto;
        }
        #nav>li{
            float: left;
            margin: 0 25px;
            font-size: 25px;
        }
        /* 设置一个类名 */
        .select{
            color: yellow;
        }

js代码

    // 1.获取元素
    var oBox = document.getElementById("box");
    var oWrap = document.getElementById("wrap");
    var aMinBox = document.getElementsByClassName("minBox");
    var aNavLi = document.getElementsByClassName("navLi");

    // 当窗口尺寸发生改变时，进行以下操作
    window.onresize = function () {
        // 每一屏的宽高要适应窗口的大小
        for (var i = 0; i < aMinBox.length; i  ) {
            aMinBox[i].style.height = window.innerHeight;
            aMinBox[i].style.width = window.innerWidth;
        }
        // 当发生改变时，屏幕自动滚动到第一屏
        oBox.style.top = "0px";
        index = 0;  // 要让index归零，否则尺寸改变后，屏幕就不可以滚动了
    }

    // 为了实现从主页跳转过来就到相应的第几屏的效果，我们需要获取到地址栏中的hash后面的数字
    console.log(window.location.hash);
    console.log(window.location.hash.substring(1));
    // 我们只要让初始的index等于它就好了
    // 创建全局变量
    // var index = 0;
    var index = Number(window.location.hash.substring(1));
    changePage (index); // 如果我们从主页跳转过来的，那就要先执行一次函数
    // 绑定鼠标滚轮事件
    document.onwheel = function (e) {
        e = e || window.event;  // 解决兼容性问题

        // 进行判断，相当于一个开关，当一屏滚动完才能滚动下一屏
        // 判断条件：当oBox相对于浏览器顶部的偏移等于盒子对于顶部的定位时  进行以下代码
        if (-(index * window.innerHeight) == oBox.offsetTop) {
            // 判断滚轮是上划还是下划
            // console.log(e);
            if (e.wheelDelta < 0) {  // 鼠标滚轮下划
                index == 3 ? index = 3 : index  ;  // 进行判断
                changePage (index);  // 调用封装的函数
            } else {
                index == 0 ? index = 0 : index--;
                changePage (index);
            }
        }
    }
    // 给导航栏的文字添加点击效果
    for(var x = 0 ; x < aNavLi.length ; x  ){
        aNavLi[x].num = x ; // 给aNavLi创建一个属性，属性值等于它的索引号
        aNavLi[x].onclick = function(){
            index = this.num;
            changePage (index);
        }
    }

    // 封装一个函数，减少代码量
    function changePage (index){
        oBox.style.top = - (index * window.innerHeight)   "px";  // 改变盒子的定位
        // 统一导航栏文字样式
        for(var j = 0 ; j < aNavLi.length ; j   ){
            aNavLi[j].className = "navLi";
        }
        // 再单独设置被选中的
        aNavLi[index].className = "navLi select";
    }

这篇好文章是转载于：学新通技术网