フロア効果を実現するためのJavaScript

この記事では、フロア効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

* {
            マージン: 0;
            パディング: 0;
        }
        
        html,
        体 {
            幅: 100%;
            高さ: 100%;
        }
        
        ul {
            幅: 100%;
            高さ: 100%;
        }
        
        ul>li {
            リストスタイル: なし;
            幅: 100%;
            高さ: 100%;
            フォントサイズ: 100px;
            テキスト配置: 中央;
        }
        
        オル {
            位置: 固定;
            左: 10px;
            上位: 50%;
            変換: translateY(-50%);
        }
        
        ol>li {
            リストスタイル: なし;
            幅: 100ピクセル;
            行の高さ: 40px;
            テキスト配置: 中央;
            境界線: 1px実線 #000;
        }
        
        .選択された{
            背景: スカイブルー;
        }

 <ul>
        <li>私はレベル1です</li>
        <li>私はレベル2です</li>
        <li>私はレベル3です</li>
        <li>私はレベル4です</li>
        <li>私はレベル5です</li>
    </ul>
 
    <オル>
        <li class="selected">レイヤー 1</li>
        <li>レイヤー 2</li>
        <li>レイヤー 3</li>
        <li>レイヤー 4</li>
        <li>レイヤー 5</li>
</ol>

js:

// 1. 床の色を初期化します。let oPages = document.querySelectorAll("ul>li");
colorArr = ['緑', '青', '紫', '赤', '黄'] とします。
        (i = 0 とします; i < oPages.length; i++) {
            ページをoPages[i]とします。
            ページスタイルの背景色を[i]に設定します。
        }
 
        // 2. クリックされたものを選択します let oItems = document.querySelectorAll("ol>li");
        現在の項目をoItems[0]とします。
 
        // 表示領域の高さを取得します。let screenHeight = getScreen().height;
 
        timerId を null にします。
        (i = 0 とします; i < oItems.length; i++) {
            item = oItems[i]とします。
            アイテム.onclick = 関数() {
                現在のアイテム.className = "";
                this.className = "選択済み";
                現在のアイテム = これ;
                // スクロールを実装します // window.scrollTo(0, i * screenHeight);
                // 注: Web ページをスクロールするには documentElement.scrollTop を使用します。値を設定するときに単位を追加しないでください。// document.documentElement.scrollTop = i * screenHeight + "px";
                // document.documentElement.scrollTop = i * screenHeight;
                タイマーIDをクリアします。
                タイマーID = setInterval(関数() {
                    begin = document.documentElement.scrollTop; とします。
                    ターゲットを i * screenHeight とします。
                    ステップ = (ターゲット - 開始) * 0.2 とします。
                    開始 += ステップ;
                    (Math.abs(Math.floor(step)) <= 1)の場合{
                        タイマーIDをクリアします。
                        document.documentElement.scrollTop = i * 画面の高さ;
                        戻る;
                    }
                    document.documentElement.scrollTop = 開始;
                }, 50);
            }
        }
 
        //ブラウザのビューポートの幅と高さを取得する関数 getScreen() {
            幅、高さを指定します。
            if (window.innerWidth) {
                幅 = ウィンドウの内側の幅;
                高さ = window.innerHeight;
            } そうでない場合 (document.compatMode === "BackCompat") {
                幅 = document.body.clientWidth;
                高さ = document.body.clientHeight;
            } それ以外 {
                幅 = document.documentElement.clientWidth;
                高さ = document.documentElement.clientHeight;
            }
            戻る {
                幅: 幅、
                高さ: 高さ
            }
        }