jquery實現(xiàn)全屏滾動效果

更新時間：2021年08月23日 10:44:18 作者：最love酸奶

這篇文章主要為大家詳細介紹了jquery實現(xiàn)全屏滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jquery實現(xiàn)全屏滾動的具體代碼，供大家參考，具體內(nèi)容如下

效果圖

思路

1.要全屏,給父級、body、html、高度設(shè)置為100%，自己的寬度也100%，還要給html、body設(shè)置溢出隱藏

html,body{
    height:100%;
    /* 實現(xiàn)全屏 */
    overflow: hidden;
}
.wrap{
    position: relative;
    top: 0;
    left: 0;
    /* 實現(xiàn)全屏 */
    height: 100%;
}
div.wrap>div{
    width:100%;height:100%;
}

2.引入mousewheel在引入min.js之后

<script src="../../0817/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="../../0817/jquery-3.5.1/jquery.mousewheel.min.js"></script>

3.e.deltaY>0上滑 e.deltaY<0下滑

4.控制滑動一次

<script>
 var flag = true;

if(flag){
 //上滑
 if(e.deltaY>0){
  flag = false;
 }
 //下滑
 else{
  flag = false;
 }
</script>

5.讓他滑起來,應該改變父級(這里是wrap的top,不是document的top,剛剛開始思路錯了，他的高度應該是子級的高度*-1)，注意應該是每次滑完了才能繼續(xù)滑動，所以function里面要寫flag=true,為了讓它不越界，要把上滑和下滑寫在一個if里面，看下代碼

<script>
    // 控制滑動一次
    if(flag){
        // 上滑
        if(e.deltaY>0){
            // 不能上滑了
            if(i>0){
                console.log(i)
                i--;
                flag = false;
                $('.wrap').animate({top:-i*hei},1000,function(){
                    flag=true;
                })
            }


        }//下滑
        else{
            // 這個if讓它不能讓下繼續(xù)滑動
            if(i<4){
                i++;
                flag = false;
                $('.wrap').animate({top:-i*hei},1000,function(){
                    flag=true;
                })
            }
        }
    }
</script>

完整代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{margin:0;padding:0;}
            /* 實現(xiàn)全屏 */
            html,body{
                height:100%;
                overflow: hidden;
            }
            .wrap{
                position: relative;
                top: 0;
                left: 0;
                /* 實現(xiàn)全屏 */
                height: 100%;
            }
            div.wrap>div{
                width:100%;
                height:100%;
            }
            div.one{
                background:lightcoral;
            }
            div.two{
                background:lightblue;
            }
            div.three{
                background:lightseagreen;
            }
            div.four{
                background:lightslategray;
            }
            div.five{
                background:pink;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
            <div class="four"></div>
            <div class="five"></div>
        </div>

        <script src="../../0817/jquery-3.5.1/jquery-3.5.1.min.js"></script>
        <script src="../../0817/jquery-3.5.1/jquery.mousewheel.min.js"></script>
        <script>
            $(function(){
                var flag = true;
                var i=0;
                var hei=$('.wrap>div').first().height();
                $(document).mousewheel(function(e){

                    // 控制滑動一次
                    if(flag){
                        // 上滑
                        if(e.deltaY>0){
                            // 不能上滑了
                            if(i>0){
                                console.log(i)
                                i--;
                                flag = false;
                                $('.wrap').animate({top:-i*hei},1000,function(){
                                    flag=true;
                                })
                            }


                        }//下滑
                        else{
                            // 這個if讓它不能讓下繼續(xù)滑動
                            if(i<4){
                                i++;
                                flag = false;
                                $('.wrap').animate({top:-i*hei},1000,function(){
                                    flag=true;
                                })
                            }
                        }
                    }

                })
            })
        </script>
    </body>
</html>