全屏滚动效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body{
            overflow: hidden;
        }
        .big{
            position: absolute;
            width: 100%;
            transition: 1s;
        }
        .div1{
            width: 100%;
            background-color: aqua;
        }
        .div2{
            width: 100%;
            background-color: slateblue;
        }
        .div3{
            width: 100%;
            background-color: sienna;
        }
    </style>
</head>
<body>
<ul class="big">
<li class="div1">1</li>
<li class="div2">2</li>
<li class="div3">3</li>
</ul>
<script>

    window.onload=function () {
        var oDiv1=document.getElementsByClassName("div1")[0];
        var oDiv2=document.getElementsByClassName("div2")[0];
        var oDiv3=document.getElementsByClassName("div3")[0];
        var oBig=document.getElementsByClassName("big")[0];
        oDiv1.style.height=window.innerHeight+"px"
        oDiv2.style.height=window.innerHeight+"px"
        oDiv3.style.height=window.innerHeight+"px"
       window.onresize=function () {
           oDiv1.style.height=window.innerHeight+"px"
           oDiv2.style.height=window.innerHeight+"px"
           oDiv3.style.height=window.innerHeight+"px"
       }
        oBig.style.top=0+"px"
            window.onmousewheel=function () {
                if(event.wheelDelta<0){
                    oBig.style.top=parseInt(oBig.style.top)-window.innerHeight+"px";
                    if(parseInt(oBig.style.top)<=-window.innerHeight*2){
                        oBig.style.top=-window.innerHeight*2+"px"
                    }
                }
                else if(event.wheelDelta>0){
                    oBig.style.top=parseInt(oBig.style.top)+window.innerHeight+"px";
                    if(oBig.style.top>=0+"px"){
                        oBig.style.top=0+"px"
                    }
                }
            }
    }
</script>
</body>
</html>
猜你喜欢
