原生javascript滿屏上下滾動

時間 2019-11-12
原文原文鏈接
使用到一個滾動事件：onmousewheel (不支持火狐瀏覽器) / DOMMouseScroll (支持火狐瀏覽器)；這篇代碼支持ie8以上版本，Firefox，Safari，Chrome。html
每一個li表明一屏內容，滾動的是div 的滾動條，根據每一個li的top值，改變滾動條距離頂部的距離。能夠在每一個li裏添加每一屏想展現給用戶的內容。chrome
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title></title>
    <style>
        *{padding:0;margin:0;}
        body{
            overflow:hidden;
        }
        div{
            position:absolute;
            top:0;
            left:0;
            overflow-y: auto;
            overflow-x:hidden;
        }
        ul{
            position:relative;
        }
        li{
            outline:1px solid red;
            position:relative;
            font-size:50px;
            font-family:Microsoft YaHei;
            font-weight:bold;
            overflow:hidden;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>
            第一屏
        </li>
        <li>
            第二屏
        </li>
        <li>
            第三屏
        </li>
        <li>
            第四屏
        </li>
    </ul>
</div>


<script>

    var type = true;//控制動畫的開關
    var bodyW = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;
    var bodyH = document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight;
    var div = document.getElementsByTagName("div")[0];
    div.style.width = bodyW + "px";
    div.style.height = bodyH + "px";
    var ul = document.getElementsByTagName("ul")[0];

    var liLen = ul.getElementsByTagName("li");//獲取li

    var spanLen = ul.getElementsByTagName("span");


    //設置Li的高度
    for(var i = 0;i<liLen.length;i++){
        liLen[i].style.height = bodyH + "px";
        liLen[i].style.lineHeight = bodyH + "px";
    }
    ul.style.height = bodyH*liLen.length + "px";//設置ul的高
    ul.style.width = bodyW + "px";//設置ul的寬



    //鼠標的滾輪事件(兼容 ie and chrome);
    div.onmousewheel = function(event){
        var event = event || window.event;
        var direction = event.wheelDelta && (event.wheelDelta > 0 ? "mouseup" : "mousedown");
        //向上滾動
        if(direction == "mouseup"){

            mouseTop();
        }

        //向下滾動
        if(direction == "mousedown"){
            mouseBottom();

        }
    }

    //鼠標滾輪事件(兼容 firefox)
    document.body.addEventListener("DOMMouseScroll", function(event) {

        var direction= event.detail && (event.detail > 0 ? "mousedown" : "mouseup");
        //向下滾動
        if(direction == "mousedown"){
            mouseBottom();
        }

        //向上滾動
        if(direction == "mouseup"){
            mouseTop();
        }
    });



    //向上滾動代碼函數
    function mouseTop(){
        //第三屏
        if(div.scrollTop == liLen[3].offsetTop && type == true){
            type = false;
            //延時滾動。要否則會先執行代碼再執行滾輪，那樣會多滾動出一截子。
            setTimeout(function(){

                AnimationTop(2);

            },10);
            return;
        }

        //第二屏
        if(div.scrollTop >= liLen[2].offsetTop && type == true){
            type = false;
            //延時滾動。要否則會先執行代碼再執行滾輪，那樣會多滾動出一截子。
            setTimeout(function(){

                AnimationTop(1);

            },10);
            return;
        }

        //第一屏
        if(div.scrollTop >= liLen[1].offsetTop && type == true){
            type = false;
            //延時滾動。要否則會先執行代碼再執行滾輪，那樣會多滾動出一截子。
            setTimeout(function(){

                AnimationTop(0);

            },10);
            return;
        }
    }

    //行下滾動代碼函數
    function mouseBottom(){
//            console.log("向下")

        //第二屏
        if(div.scrollTop == liLen[0].offsetTop && type == true){
            type = false;

            //延時滾動。要否則會先執行代碼再執行滾輪，那樣會多滾動出一截子。
            setTimeout(function(){

                AnimationBottom(1);

            },10);

            return;
        }

        //第三屏
        if(div.scrollTop <= liLen[1].offsetTop && type == true){
            type = false;
            //延時滾動。要否則會先執行代碼再執行滾輪，那樣會多滾動出一截子。
            setTimeout(function(){

                AnimationBottom(2);

            },10);
            return;
        }

        //第四屏
        if(div.scrollTop <= liLen[2].offsetTop && type == true){
            type = false;
            //延時滾動。要否則會先執行代碼再執行滾輪，那樣會多滾動出一截子。
            setTimeout(function(){

                AnimationBottom(3);

            },10);
            return;
        }
    }

    //向上滾輪動畫函數
    function AnimationTop(num){
        var t = setInterval(function(){
            if(div.scrollTop > liLen[num].offsetTop){

                //控制移動速度（慢--快--慢）
                // -- 慢
                if(div.scrollTop >= liLen[num].offsetTop+(parseInt(liLen[num].style.height)/11*9)) {

                    div.scrollTop -= 1;

                    // -- 快
                }else if(div.scrollTop <= liLen[num].offsetTop+(parseInt(liLen[num].style.height)/11*9) && div.scrollTop >= liLen[num].offsetTop+(parseInt(liLen[num].style.height)/11*2)){
                    div.scrollTop -= 3;


                    // -- 慢
                }else if(div.scrollTop <= liLen[num].offsetTop+(parseInt(liLen[num].style.height)/11*2) && div.scrollTop >= liLen[num].offsetTop){

                    div.scrollTop -= 1;

                }

            }else{
                div.scrollTop = liLen[num].offsetTop;
                clearInterval(t);
                type = true;
            }
        },1);
    }

    //向下滾輪動畫函數
    function AnimationBottom(num){
        var t = setInterval(function(){
            if(div.scrollTop < liLen[num].offsetTop){

                //控制移動速度（先快後慢）
                // -- 慢
                if(div.scrollTop <= liLen[num].offsetTop/11*2) {

                    div.scrollTop += 1;

                // -- 快
                }else if(div.scrollTop >= liLen[num].offsetTop/11*2 && div.scrollTop <= liLen[num].offsetTop/11*10){
                    div.scrollTop += 3;

                // -- 慢
                }else if(div.scrollTop >= liLen[num].offsetTop/11*10 && div.scrollTop <= liLen[num].offsetTop){

                    div.scrollTop += 1;

                }

            }else{
                div.scrollTop = liLen[num].offsetTop;
                clearInterval(t);
                type = true;
            }
        },1);
    }


</script>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。