jquery实现全屏滚动效果

本文实例为大家分享了jquery实现全屏滚动的具体代码，供大家参考，具体内容如下

效果图

思路

1.要全屏,给父级、body、html、高度设置为100%，自己的宽度也100%，还要给html、body设置溢出隐藏

html,body{
    height:100%;
    /* 实现全屏 */
    overflow: hidden;
}
.wrap{
    position: relative;
    top: 0;
    left: 0;
    /* 实现全屏 */
    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)，注意应该是每次滑完了才能继续滑动，所以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让它不能让下继续滑动
            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;}
            /* 实现全屏 */
            html,body{
                height:100%;
                overflow: hidden;
            }
            .wrap{
                position: relative;
                top: 0;
                left: 0;
                /* 实现全屏 */
                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让它不能让下继续滑动
                            if(i<4){
                                i++;
                                flag = false;
                                $('.wrap').animate({top:-i*hei},1000,function(){
                                    flag=true;
                                })
                            }
                        }
                    }

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

总结:

1.top去实现

2.记到overflow

3.上滑的top依然是负数，不是正数

4.高度和宽度要设置为100%

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自学编程网。

编程技巧