HTML における DOM 要素のスクロールバースクロール制御の詳細な説明

dom要素に新しい子要素を追加し、新しく追加された新しい要素がコンテナーのスコープを超えた場合は、次の図に示すように、新しく追加された子要素の位置まで自動的にスクロールする必要があるという要件に遭遇したことがあるかどうかはわかりません。

次に、上の図のような効果やその他のスクロール関連の機能を実現しながら、 dom要素のスクロールに関するいくつかの知識ポイントを学習します。

理解する必要がある DOM プロパティとメソッド: scrollTop、clientHeight、scrollHeight

scrollTop属性は、コンテナ要素コンテンツの上部の値とコンテナ要素 ( viewport ) のtopの値の差、つまりコンテナ内のコンテンツが上にスライドした後にコンテナビューポートを超えるコンテナの部分を表す値です。このプロパティを変更することでスクロール状態を制御できます。

clientHeightは、コンテナーの高さを記述するdomプロパティです。

scrollHeightは、コンテナーコンテンツの高さを記述するdomプロパティです。

3 つの属性間の関係は次の図に示されています。

getBoundingClientRect()

このメソッドは、要素のレイアウトに必要な、 left 、 right 、 top 、 bottom 、 height 、 widthなどのいくつかの幾何学的プロパティを取得するために使用されます。

スクロールバイ(x,y)

domコンテナのscrollToメソッドを使用すると、スクロールバーを直接制御して、指定した距離だけスクロールすることができます。この方法は、特定の要素までスクロールする必要がある場合に便利です。

スクロール先(x,y)

domコンテナのscrollToメソッドを使用すると、スクロールバーを直接制御して、指定した位置までスクロールできます。スクロールバーを制御して上または下にスクロールする場合に、このメソッドを使用すると便利です。

ローリング制御準備の実施

まずはhtmlを準備しましょう

<!DOCTYPE html>
<html>
    <ヘッド>
       <title>スクロールバー設定の詳細な説明</title>
       <スタイル>
          #スクロールコンテナ{
              高さ: 500px;
              幅: 500ピクセル;
              overflow-y: スクロール;
              パディング: 50px;
              ボックスのサイズ: 境界線ボックス;
          }
          .スクロールアイテム{
              高さ: 200px;
              幅: 500ピクセル;
              上マージン: 20px;
              背景色: アクアマリン;
              ディスプレイ: フレックス;
              アイテムの位置を中央揃えにします。
              コンテンツの中央揃え: 中央;
          }
       </スタイル>
    </head>
    <本文>
       <div id="スクロールコンテナ">
           <div id="スクロールコンテナ">
               <div id="item1" class="scroll_item">
                   <span>1</span>
               </div>
               <div id="item2" class="scroll_item">
                    <span>2</span>
                </div>
                <div id="item3" class="scroll_item">
                    <span>3</span>
                </div>
                <div id="item4" class="scroll_item">
                    <span>4</span>
                </div>
                <div id="item5" class="scroll_item">
                    <span>5</span>
                </div> 
           </div>
           <button onclick="addItem()">要素を追加する</button>
       </div>
    </本文>
    <スクリプト>
        コンテナを document.getElementById("scroll_container");
        インデックスを5とします。
        //要素を追加する function addItem(){
            インデックス+=1;
            item=`<div id="${'item'+index}" class="scroll_item">とします。
                            <span>${インデックス}</span>
                        </div>`;
            コンテナ.innerHTML+=アイテム;  
            タイムアウトを設定します(()=>{
                スクロールしてインデックスを作成します。
            })
         }
    </スクリプト>
</html>

上記のコードにはスクロール可能な領域が含まれており、スクロール領域に要素を追加したり、指定した要素の位置までスクロールしたりできます。一般的な効果は、次の図のようになります。

scrollTopを使用して達成する

基本的な実装

scrollTopの意味は前に説明しました。コンテナ要素のscrollTop値を変更することで、スクロールバーのスクロールを制御できます。 scrollTop値が大きいほど、スクロールバーのスクロール距離は元の状態 ( scrollTopが 0 の場合) に比べて大きくなります。

scrollTopの意味がわかれば、 scrollTopを使用してスクロールバーを制御できます。次に、最初に下へのスクロールを実装し、上記のコードにscrollToBottom()メソッドを追加します。

関数scrollToBottom(){
    y = container.scrollHeight - container.clientHeight とします。
    コンテナのスクロールトップ=y;
}

同様に、一番上までスクロールしたい場合は、 scrollTopを 0 に設定するだけです。

関数 scrollToTop(){
    コンテナのスクロールトップ=0;
}

getBoundingClientRect()メソッドと組み合わせると、指定した要素まで簡単にスクロールすることもできます。ここでgetBoundingClientRect().top子要素の上端と親要素のビューポートの上端の間の距離を表します。

関数 scrollToElement(el){
     コンテナのスクロールトップ+=el.getBoundingClientRect().top;
}

アニメーションを追加

一番下までスクロール

しかし、上記のコードのスクロールは固すぎます。setInterval setInterval()を使用すると、アニメーション効果を追加できます。アニメーション効果を実現するプロセスを分析してみましょう。アニメーションの実現は、一定時間内に変数の変化を完了することに他なりません。したがって、まず変数のオフセット（ scrollTop ）と変化に必要な時間という 2 つの変数を知る必要があります。オフセットはscrollTopの最終値から元の値を引いた値であり、変化の持続時間は通常、変更可能なパラメータとして設定されます。上記のプロセスを理解した上で、一番下までスクロールする例を見てみましょう。

//まずscrollToBottom関数を記述します。function scrollToBottom(el){
              if(!el){
                  el=コンテナ;
              }
              //元の値 let startTop=el.scrollTop;
              //最終値 let endTop=el.scrollHeight-el.clientHeight;
              //アニメーション制御関数を生成します。let scrollAnimationFn=doAnimation(startTop,endTop,300,el);
              // 10msごとにアニメーションを実行する let interval=setInterval(()=>{
                scrollAnimationFn(間隔)
              },10)
 }
/**
 * @description: アニメーション制御関数を生成するファクトリー関数（クロージャを使用）
 * @パラメータ {
    startValue: 変数の元の値 endValue: 変数の最終値duration: アニメーションの継続時間el: スクロールアニメーションを実行する要素} 
 * @戻り値: null
 */
関数doAnimation(開始値、終了値、継続時間、el){
              //クロージャを使用して変数 dy と step (各アニメーションのスクロール距離) を保存します。
              dy=0 とします。
              ステップを(終了値-開始値)/(継続時間/10)とします。
              //アニメーション制御関数を返す return function(interval){
                  dy+=ステップ;
                  if(dy>=終了値-開始値){
                      clearInterval(間隔);
                  }
                  el.scrollTop+=ステップ;
              }
 }

addItem 関数を変更して、下部へのスクロールアニメーションを追加します。

関数addItem(){
            インデックス+=1;
            item=`<div id="${'item'+index}" class="scroll_item">とします。
                            <span>${インデックス}</span>
                        </div>`;
            コンテナ.innerHTML+=アイテム;  
            タイムアウトを設定します(()=>{
                // スクロールしてインデックスを作成します。
                scrollToBottom(コンテナ);
            })
           
 }

次に、HTML の下部にスクロールボタンを追加します。

<button onclick="scrollToBottom()">一番下までスクロール</button>

上へスクロール

上記の方法に従って、上部にスクロールする一般的なアニメーションを実装することもできます。

//scrollToTop関数を記述する function scrollToTop(el){
              if(!el){
                  el=コンテナ;
              }
              //元の値 let startTop=el.scrollTop;
              //最終値 let endTop=0;
              //アニメーション制御関数を生成します。let scrollAnimationFn=doAnimation(startTop,endTop,300,el);
              // 10msごとにアニメーションを実行する let interval=setInterval(()=>{
                scrollAnimationFn(間隔)
              },10)
 }

一番下へのスクロールに適応するには、アニメーションの停止のタイミングを変更する必要があります。変更されたdoAnimation()関数は次のとおりです。

関数doAnimation(開始値、終了値、継続時間、el){
              //クロージャを使用して変数 dy と step (各アニメーションのスクロール距離) を保存します。
              dy=0 とします。
              ステップを(終了値-開始値)/(継続時間/10)とします。
              関数を返す(間隔){
                  dy+=ステップ;
                  //ここで絶対値判定を使用するように変更します if(Math.abs(dy)>=Math.abs(endValue-startValue)){
                      clearInterval(間隔);
                  }
                  el.scrollTop+=ステップ;
              }
 }

最後に、 html一番下までスクロールするボタンを追加します。

<button onclick="scrollToTop()">先頭へスクロール</button>

効果は以下のとおりです。

指定された要素までスクロールします

まず、必要なボタンと入力ボックスを HTML 要素に追加します。

<input type="number" placeholder="スクロールする要素のインデックスを入力してください" style="width: 200px;"/>
<button onclick="scrollToElement()">指定された要素までスクロールします</button>

指定した要素をスクロールするためのアニメーション実行関数を追加します。

関数 scrollToElement(containerEl,el){
            if(!コンテナEl){
                //親要素 containerEl=container;
            }
            if(!el){
                //スクロールする要素を取得します。 input=document.getElementsByTagName('input')[0];
                id='item'+input.value; とします。
                if(!入力値){
                    id='アイテム'+インデックス;
                }
                el=ドキュメント.getElementById(id);
            }
            startTop=containerEl.scrollTop とします。
            endTop=startTop+el.getBoundingClientRect().top とします。
            scrollAnimationFn=doAnimation(startTop,endTop,300,containerEl); を設定します。
            間隔をsetInterval(()=>{とする
                scrollAnimationFn(間隔)
            },10)
}

効果は以下のとおりです。

scrollTo() の使用

scrollTo(x,y)の使い方は、基本的にscrollTop属性の使い方と同じです。親要素のscrollTo()メソッドは、スクロールバーを指定した位置までスクロールするように制御できます。これは、実際にはscrollTopの値を設定することと同じです。例を挙げてみましょう:

//ここでは、y 軸スクロールを例に挙げます。element.scrollTo(0,y);
要素のスクロールトップ=y;
//上記の 2 つの文は同じ効果があります。

したがって、 scrollTo()メソッドを使用してスクロールバーを制御することは、scrollTop を使用する場合と基本的に同じです。doAnimation doAnimation()関数を変更するだけで済みます。コードは次のとおりです。

関数doAnimation(開始値、終了値、継続時間、el){
              //クロージャを使用して変数 dy と step (各アニメーションのスクロール距離) を保存します。
              dy=0 とします。
              step=(終了値-開始値)/(継続時間/10)とします。
              関数を返す(間隔){
                  dy+=ステップ;
                  (Math.abs(dy)>=Math.abs(endValue-startValue))の場合{
                      clearInterval(間隔);
                  }
                  //el.scrollTop+=step; //このコード行は次のように変更されます el.scrollTo(0,el.scrollTop+step);
              }
}

実行効果はscrollTopを使用した場合と同じです。

scrollBy() の使用

基本的な実装

また、 scrollBy(x,y)を使用してスクロールバーを制御することもできます。前述のように、 scrollBy()メソッドは、指定された距離 (位置ではないことに注意してください) だけスクロールするようにスクロールバーを制御します。 scrollBy() を使用すると、指定した要素まで簡単にスクロールできます。コードは次のとおりです。

関数 scrollToElement(containerEl,el){
    //getBoundingClientRect().top は子要素の上端と親要素の上端の間の距離なので、この値は親要素に対する子要素のオフセットです。この値を scrollBy に渡します。つまり、指定された要素までスクロールします。containerEl.scrollBy(0,el.getBoundingClientRect().top);
}

一番下までスクロールします:

関数 scrollToBottom(containerEl){
    dy=containerEl.scrollHeight-containerEl.clientHeight; とします。
    コンテナEl.scrollBy(0,dy);
}

上へスクロール

関数 scrollToTop(containerEl){
    dy = -(containerEl.scrollHeight - containerEl.clientHeight)とします。
    コンテナEl.scrollBy(0,dy);
}

アニメーションを追加

ここではscrollBy()のパラメーターが変数のオフセットであるため、アニメーション生成関数を変更し、次の変更を加えます。

関数 scrollToBottom(containerEl){
              if(!コンテナEl){
                containerEl=コンテナ;
              }
              //dy はオフセットです。let dy=containerEl.scrollHeight-containerEl.clientHeight;
              scrollAnimationFn=doAnimation(dy,300,containerEl); を設定します。
              間隔をsetInterval(()=>{とする
                scrollAnimationFn(間隔)
              },10)
         }
         関数 scrollToTop(containerEl){
              if(!コンテナEl){
                containerEl=コンテナ;
              }
              //dy はオフセットです。let dy=-(containerEl.scrollHeight-containerEl.clientHeight);
              scrollAnimationFn=doAnimation(dy,300,containerEl); を設定します。
              間隔をsetInterval(()=>{とする
                scrollAnimationFn(間隔)
              },10)
         }
         関数 scrollToElement(containerEl,el){
            if(!コンテナEl){
                containerEl=コンテナ;
            }
            if(!el){
                入力を document.getElementsByTagName('input')[0] にします。
                id='item'+input.value; とします。
                if(!入力値){
                    id='アイテム'+インデックス;
                }
                el=ドキュメント.getElementById(id);
            }
           //dy はオフセットです。let dy=el.getBoundingClientRect().top;
            scrollAnimationFn = doAnimation(dy, 300, containerEl); とします。
            間隔をsetInterval(()=>{とする
                scrollAnimationFn(間隔)
            },10)
         }
         /**
          * @説明： 
          * @param {型} 
          * @戻る： 
          */
         関数doAnimation(dy,duration,el){
              //クロージャを使用して、exe_dy や step (各アニメーションのスクロール距離) などの変数を保存します。
              let exe_dy=0; //オフセットはすでに実行済み let step=dy/(duration/10);
              関数を返す(間隔){
                  exe_dy+=ステップ;
                  (Math.abs(exe_dy)>=Math.abs(dy))の場合{
                      clearInterval(間隔);
                  }
                  el.scrollBy(0,ステップ);
              }
         }

実行効果はscrollTopを使用した場合と同じです。

やっと

上記: point_up_2: は、DOM スクロールバーコントロールの詳細な要約と説明、およびいくつかの基本的な使用方法です。

これで、HTML における DOM 要素のスクロールバーのスクロール制御の詳細概要に関するこの記事は終了です。より関連性の高い DOM 要素のスクロールバーのスクロールコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: CSS3 で実装された画像ホバートグルボタン

>>: 超大型フォントを使用した 40 の Web ページデザイン