用原生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>