用原生js写全屏滚动

css代码

<style>
            body,div,ul,li{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body{
                background-image: url(img/004.JPG) center cover;
            }
            #fullpage{
                width:100%;
                position: fixed;/*没有滚动条*/
                top:50px;
                transition:all 1s ease-in-out;
            }
            div{
                width:100%;
                
            }
            .box1{
                background: #f0c8ec;
            }
            .box2{
                background: #db9def;
            }
            .box3{
                background: #c2acf4;
            }
            .box4{
                background: #acc9f4;
            }
            .box5{
                background: #acf4f3;
            }
            .box6{
                background: #acf4d0;
            }
            .box7{
                background: #ecf4ac;
            }
            .nav{
                width:100%;
                height: 50px;
                background: red;
                position: fixed;
                top:0;
                z-index: 99;
            }
            .nav li{
                width:120px;
                height: 50px;
                list-style: none;
                font-size: 20px;
                color: white;
                font-weight: bold;
                text-align: center;
                line-height: 50px;
                float: left;
            }
        </style>

html代码

<ul class="nav">
            <li>nav1</li>
            <li>nav2</li>
            <li>nav3</li>
            <li>nav4</li>
            <li>nav5</li>
            <li>nav6</li>
            <li>nav7</li>
        </ul>

        <div id="fullpage">
            <div class="box1">second1</div>
            <div class="box2">second2</div>
            <div class="box3">second3</div>
            <div class="box4">second4</div>
            <div class="box5">second5</div>
            <div class="box6">second6</div>
            <div class="box7">second7</div>
        </div>

javascript代码

<script type="text/javascript">
        var _fullpage = document.getElementById("fullpage");
        var _div = _fullpage.getElementsByTagName("div");
        var _lis = document.getElementsByTagName("li");
        var h = (window.innerHeight || document.documentElement.clientHeight) - 50;
        
        _lis[0].style.backgroundColor = "#000";
        
        for(var i = 0;i < _div.length;i++){
            _div[i].style.height = h + "px";
        }
        
        function addE(obj,type,fn){
            if(obj.addEventListener){
                obj.addEventListener(type,fn);
            }else if(attachEvent){
                obj.attachEvent("on" + type,fn);
            }
        }
        
        addE(document,"mousewheel",wheel);
        addE(document,"DOMMouseScroll",wheel);
        
        
        //滚轮事件
        function getWD(evt){
            var e = evt || window.event;
            if(e.wheelDelta){
                return e.wheelDelta;
            }else if(e.detail){
                return -e.detail*40;
            }
        }

        for(var k = 0;k < _lis.length;k++){
            var a = _lis[k]; //获得索引号
            a.index = k;
            a.onmouseover =function(){

                clic(this.index);
                check(this.index);
            }
        }
        
        function clic(n){
            _fullpage.style.top = -h * n + 50 + "px";    
        }
                
        function check(s){        
            for(var b = 0;b < _lis.length;b++){
                if(b == s){
                    _lis[b].style.backgroundColor = "#000";
                }else{
                    _lis[b].style.backgroundColor = "transparent";
                }
            }
        }
        
        var j=0;
        function wheel(ev){    
            if(getWD(ev) < 0){
                j++;
            }
            if(getWD(ev) > 0){
                j--;
            }
            if(j >= 7){
                j = 0;
            }
            if(j < 0){
                j = 6;
            }
            _fullpage.style.top = -h * j + 50 + "px";    
            check(j);
        }

    </script>