全画面ページのスクロール効果を実現するJavaScript

JavaScript DOM を読み終えた後、解釈型 JavaScript スクリプト言語に対する理解が深まり、JavaScript コードがより標準化されました。

次に、今日皆さんにお伝えしたい技術的な問題、つまり全画面ページでのスクロールについてお話しします。

実装されたコードは非常にシンプルですが、その中の問題点を発見するには、長年の経験、読解経験、そしてプログラマーの豊かな想像力が必要です。

まず、最終的な 2 つのレンダリングと console.log によって出力されたコンテンツを見てみましょう。

1. ページ2の効果をクリックして結果を印刷します。

クリック後、pagelist[this.index].rollCount タイマーに Math.ceil(rollData.num) という値の文字列が出力されます。5 秒後に別のカウンターが自動的に実行され、pagelist[this.index].rollCount タイマーがクリアされます。

2. もう一度ページ 2 をクリックすると、次の結果が印刷されます。

クリック後、まずpagelist[this.index].rollCountタイマーが存在するかどうかを確認し、存在する場合はクリアします。クリックに対応するページに到達した場合は、実行されていないことを出力して戻ります。

詳しくは、以下の例をご覧ください。さまざまな状況が詳しく説明されています。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>全画面ページめくり効果</title>
    <スタイル>
        * {
            パディング: 0;
            マージン: 0;
        }
 
        html、本文{
            幅: 100%;
            高さ: 100%;
            色: #fff;
        }
 
        ul {
            リストスタイル: なし
        }
 
        #ナビ{
            位置: 固定;
            上: 50px;
            左: 50px;
        }
 
        #nav li {
            幅: 80ピクセル;
            高さ: 50px;
            テキスト配置: 中央;
            行の高さ: 50px;
            境界線: 2px 実線 #fff;
            カーソル: ポインタ;
        }
 
        #nav li:n番目の子(1) {
            背景: #f60;
        }
 
        #nav li:n番目の子(2) {
            背景: #63c;
        }
 
        #nav li:n番目の子(3) {
            背景: #3c6;
        }
 
        #nav li:n番目の子(4) {
            背景: #f9c;
        }
 
        #ページ {
            幅: 100%;
            高さ: 100%;
        }
 
        #ページ li {
            幅: 100%;
            高さ: 100%;
        }
    </スタイル>
</head>
<本文>
<ul id="ページ">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul id="nav">
    <li>ページ 1</li>
    <li>ページ 2</li>
    <li>ページ 3</li>
    <li>ページ 4</li>
</ul>
<スクリプト>
    関数rollingPage() {
        var pageul = document.getElementById("ページ");
        var pagelist = pageul.children;
 
        var navul = document.getElementById("nav");
        var navlist = navul.children;
 
        (i = 0; i < navlist.length; i++) の場合 {
            //すべてのスタイルを取得する getComputedStyle
            var bgcolor = getComputedStyle(navlist[i], "").backgroundColor;
// アラート(背景色);
            ページリスト[i].style.background = bgcolor;
 
            //現在の要素のインデックス オブジェクトを定義し、現在の要素の添字を保存します。navlist[i].index = i;
 
            //変数をオブジェクトとして宣言する var rollData = {
                番号: 0,
                ターゲット: 0
            };
            navlist[i].onclick = 関数 () {
 
                //クリックされたボタンに対応するページとページ全体の上端の間の距離 rollData.target = pagelist[this.index].offsetTop;
 
                //クリックされた要素が現在の要素かどうかを判断します。現在の要素である場合は、実行を継続しません。var h = window.innerHeight || document.documentElement.clientHeight 
                    || ドキュメント本体のクライアントの高さ;
                var x = this.index;
                //現在クリックされたボタンに対応するページに要素属性タイマーがあるかどうかを判断します if (pagelist[this.index].rollCount) {
                    console.log("存在する");
                    ページリストのロールカウントをクリアします。
 
                    /* 連続クリックによって直接戻ったり、ページが完全に読み込まれなかったりすることを防ぐため、それを防ぐための判断を追加します。
                     ※このように、上記をクリアした後でも、ページに完全に到達しない場合でも、
                       *カウンタpagelist[this.index].rollCountも下方向に実行されます
                     * */
                    /*しかし、物事は決して完璧にはならず、常に改善する必要があることがわかりました。
                     ※友人とチャットをしている最中に、再度現在のページに対応するボタンをクリックしました。
                       ※しかし、以下の戻りは実行されていないことがわかりました。
                     *カウンターに出力された Math.ceil(rollData.num) の値をもう一度見てみましょう。1 です。
                     *したがって、Math.ceil(rollData.num) + 1 == h * x || 
                     *Math.ceil(rollData.num) - 1 == h * x
                     *
                     * もう一つの理由は、
                       * window.scrollTo(0, Math.ceil(rollData.num) + 1) の場合
                     * 1 を減算し、アルカリを追加せずに保存すると、アルカリを追加しない値は Math.ceil(rollData.num) になります。
                     * */
                    (Math.ceil(rollData.num) + 1 == h * x || の場合 
                             Math.ceil(rollData.num) - 1 == h * x || 
                                   Math.ceil(rollData.num) == h * x) {
                        console.log("実行されませんでした");
                        //それが存在し、スクロールバーがスクロールする値が現在のページと等しい場合、
                          //カウンターは下方向には実行されません。
                        戻る;
                    }
                }
 
                //ページをスクロールするためのタイマー pagelist[this.index].rollCount = setInterval(function () {
                    //Math.ceil() は、rollData.num = rollData.num + より大きい方向に丸めます。 
                                     (rollData.target - rollData.num) / 10;
                    コンソールにログ出力します。
              //1. スクロールバーをh*xの位置に移動します。window.scrollTo()
             //2. Math.ceil によって取得された後の rollData.num 属性の絶対値が x*h の前後で 1 になるケースを判別します。 //上記 2 つの操作を行う理由は、Math.ceil(rollData.num) の値を印刷するときに、x*h の前後の値の差が 1 になる場合があることがわかったためです。
                    (Math.ceil(rollData.num) + 1 == h * x)の場合{
                        window.scrollTo(0, Math.ceil(rollData.num) + 1);
                    } そうでない場合 (Math.ceil(rollData.num) - 1 == h * x) {
                        window.scrollTo(0, Math.ceil(rollData.num) - 1);
                    } それ以外 {
                        window.scrollTo(0, Math.ceil(rollData.num));
                    }
                }, 30);
 
                /*5秒後、条件が満たされた場合、pagelist[x].rollCountカウンターをクリアして、上位カウンターが継続的に実行されるのを防ぐことができます* */
                setTimeout(関数() {
                    //5秒後、Math.ceil(rollData.num)で前回と次回の差が1の場合、
                        // 上記のタイマーをクリアします if (Math.ceil(rollData.num) + 1 == h * x || 
                           Math.ceil(rollData.num) - 1 == h * x || 
                               Math.ceil(rollData.num) == h * x) {
                        console.log("自動的にクリア" + x);
                        ページリスト[x].rollCountをクリアします。
                    }
                }, 5000);
            }
        }
    }
 
    ローリングページへのロードイベントを追加します。
    関数addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = 関数;
        } それ以外 {
            window.onload = 関数（）{
                古いonload();
                関数();
            }
        }
    }
</スクリプト>
</本文>
</html>

上記の最適化を完了した後、今後もさらに多くの本を読んだり、オープンソースの Web サイトにアクセスして専門家が書いたコードを読んだり、想像力を駆使して自分のコードを常に改善したりする必要があることがわかりました。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: