jQueryでフルスクリーンスクロール効果を実現

この記事の例では、フルスクリーンスクロールを実現するためのjQueryの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

レンダリング

アイデア

1. フルスクリーンにするには、親、本文、HTML、高さを100%、幅を100%に設定し、HTMLと本文のオーバーフロー非表示を設定します。

html,本文{
    高さ:100%;
    /* フルスクリーンを実現する */
    オーバーフロー: 非表示;
}
。包む{
    位置: 相対的;
    上: 0;
    左: 0;
    /* フルスクリーンを実現する */
    高さ: 100%;
}
div.wrap>div{
    幅:100%;高さ:100%;
}

2. 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.スライドを一度コントロールする

<スクリプト>
 var フラグ = true;

if(フラグ){
 //スライドアップif(e.deltaY>0){
  フラグ = false;
 }
 //下にスライドします。
  フラグ = false;
 }
</スクリプト>

5. スライドさせるには、親を変更する必要があります (ここでは、ドキュメントの上部ではなく、ラップの上部です。最初は間違った考えでした。その高さは、子の高さ * -1 である必要があります)。各スライドの後にスライドを継続できるようにする必要があることに注意してください。そのため、関数に flag = true を記述する必要があります。境界を越えないようにするには、上下のスライドを if で記述します。以下のコードを参照してください。

<スクリプト>
    // スライドを1回制御する if(flag){
        //スライドアップif(e.deltaY>0){
            //上にスライドできません if(i>0){
                コンソールログ(i)
                私 - ;
                フラグ = false;
                $('.wrap').animate({top:-i*hei},1000,function(){
                    フラグ=true;
                })
            }


        }//下にスライドします else{
            // これは滑り落ちないようにするためです if(i<4){
                私は++;
                フラグ = false;
                $('.wrap').animate({top:-i*hei},1000,function(){
                    フラグ=true;
                })
            }
        }
    }
</スクリプト>

完全なコード

<!DOCTYPE html>
<html>
    <ヘッド>
        <メタ文字セット="utf-8">
        <タイトル></タイトル>
        <スタイル>
            *{マージン:0;パディング:0;}
            /* フルスクリーンを実現する */
            html,本文{
                高さ:100%;
                オーバーフロー: 非表示;
            }
            。包む{
                位置: 相対的;
                上: 0;
                左: 0;
                /* フルスクリーンを実現する */
                高さ: 100%;
            }
            div.wrap>div{
                幅:100%;
                高さ:100%;
            }
            div.one{
                背景:ライトコーラル;
            }
            div.2{
                背景:水色;
            }
            div.3{
                背景:ライトシーグリーン;
            }
            div.4{
                背景:ライトスレートグレー;
            }
            div.5{
                背景:ピンク;
            }
        </スタイル>
    </head>
    <本文>
        <div class="wrap">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
            <div class="4"></div>
            <div class="5"></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>
        <スクリプト>
            $(関数(){
                var フラグ = true;
                var i = 0;
                var hei=$('.wrap>div').first().height();
                $(document).mousewheel(function(e){

                    // スライドを1回制御する if(flag){
                        //スライドアップif(e.deltaY>0){
                            //上にスライドできません if(i>0){
                                コンソールログ(i)
                                私 - ;
                                フラグ = false;
                                $('.wrap').animate({top:-i*hei},1000,function(){
                                    フラグ=true;
                                })
                            }


                        }//下にスライドします else{
                            // これは滑り落ちないようにするためです if(i<4){
                                私は++;
                                フラグ = false;
                                $('.wrap').animate({top:-i*hei},1000,function(){
                                    フラグ=true;
                                })
                            }
                        }
                    }

                })
            })
        </スクリプト>
    </本文>
</html>