このような要件に遭遇したかどうかはわかりません。新しい子要素をdom要素に追加し、新しく追加した新しい要素がコンテナの範囲を超える場合、次の図に示すように、新しく追加された子要素の位置に自動的にスクロールする必要があります。
次に、 dom要素スクロールに関連するいくつかの知識ポイントを学習している間、上記の画像や他のスクロール関連の機能の効果を実現できます。
スクロールトップ、clientheight、scrollheightを理解する必要があるDOMプロパティと方法
scrollTop属性は、コンテナ要素コンテンツの最高値と、トップviewportポートの最上位のtop値、つまりコンテナビューポートを越えて上向きにスライドするコンテナの一部の違いです。スクロール状態は、このプロパティを変更することで制御できます。
clientHeightは、コンテナの高さを記述するdom属性です。
scrollHeight 、コンテナコンテンツの高さを記述するdom属性です。
3つの属性間の関係を以下の図に示します。
getBoundingClientRect（）
この方法は、 left 、 right 、 top 、 bottom 、 widthなど、要素レイアウトに必要ないくつかの幾何学的特性を取得するために使用されますheight
srollby（x、y）
domコンテナのscrollToメソッドを使用して、スクロールスクロールの指定された距離を直接制御できます。この方法は、指定された要素にスクロールする必要がある場合に便利です。
srollto（x、y）
domコンテナのscrollToメソッドを使用して、Scrollbarを直接制御して指定された位置にスクロールできます。この方法は、スクロールバーを制御して上部または下部にスクロールする場合、より便利です。
ローリングコントロールの準備を実装します
最初にhtmlを準備しましょう
<！doctype html> <html> <head> <title>スクロールバー設定の詳細な説明</title> <style> #scroll_container {height：500px;幅：500px;オーバーフロー-Y：スクロール;パディング：50px;ボックスサイズ：ボーダーボックス; } .scroll_item {height：200px;幅：500px;マージントップ：20px;背景色：アクアマリン;ディスプレイ：Flex; Align-Items：Center; justify-content：center; } </style> </head> <body> <div id = scroll_container> <div id = scroll_container> <divid1 class = scroll_item> <span> 1 </span> </div> <div = div = div = div = div dive2 class = scroll_item> <span> 2 </span </divid3 span> </</</</</</</</</< id = item4 class = scroll_item> <span> 4 </span> </div> <divid = item5 class = scroll_item> <span> 5 </span> </div> </div> <button onclick = additem（）>要素の追加</button> </div> </body> <script> document.getElementyid（scroll_container）; index = 5とします。 //要素関数additem（）{index+= 1;を追加します。 let item = `<div id = $ {'item'+index} class = scroll_item> <span> $ {index} </span> </div>`; container.innerhtml+= item; setimeout（（）=> {scrolltoindex（）;}）} </script> </html>上記のコードにはスクロール可能な領域が含まれており、スクロール領域に要素を追加したり、指定された要素位置にスクロールしたりできます。一般的な効果は次のとおりです。
基本的な実装
scrollTopの意味は以前に説明されています。コンテナ要素のスクロールトップのscrollTop値を変更することにより、スクロールを制御できます。 scrollTop値が大きいほど、スクロールバーのスクロール距離が元の状態に比べて大きくなります（ scrollTopが0の場合）。
scrollTopの意味を理解した後、 scrollTopを使用してScrollbarコントロールを実装できます。次に、最初に下部にスクロールを実装し、上記のコードにscrollToBottom()メソッドを追加します。
function scrolltobottom（）{let y = container.scrollheight-container.clientheight; container.scrolltop = y;}上部にスクロールする場合は、 scrollTopを0に設定するだけです。
functionscrolltotop（）{container.scrolltop = 0;} getBoundingClientRect()メソッドを組み合わせて、指定された要素にスクロールすることを簡単に実装することもできます。GetBoundingClientRect getBoundingClientRect().top子要素の上部から親要素ビューポートの上部までの距離を表します。
function ScrolltoElement（el）{container.scrolltop+= el.getBoundingClientRect（）。TOP;}アニメーションを追加します下にスクロールします
ただし、上記のコードのスクロールは硬すぎます。 Animation Effectを追加できます。これは、 setInterval()の助けを借りて実装できます。アニメーション効果を実装するプロセスを分析します。アニメーションの実装は、一定の期間内に変数の変更を完了することにすぎません。したがって、最初に、変数（ scrollTop ）と変更に必要な2つの変数のオフセットを知る必要があります。オフセットは、 scrollTopから元の値を差し引いた最終値であり、変更期間は通常、変更できるパラメーターに設定されます。上記のプロセスを理解した後、まず次の例として下にスクロールしてみましょう。
//最初にscrolltobottom関数を書き込みますscrolltobottom（el）{if（！el）{el = container; } //元の値let starttop = el.scrolltop; //最終的な値let endtop = el.scrollheight-el.clientheight; //アニメーション制御関数を生成するlet scrollanimationfn = doanimation（starttop、endtop、300、el）; //アニメーションを実行し、let let interval = setinterval（（）=> {scrollanimationfn（interval）}、10）}/** * @description：アニメーション制御機能を生成する工場関数（閉鎖を使用） */function doanimation（startValue、endvalue、duration、el）{//閉鎖を使用して変数dyとステップ（各アニメーションスクロールの距離）を保存します。 let step =（endvalue-startvalue）/（duration/10）; //アニメーション制御関数の戻り機能（間隔）{dy+= step; if（dy> = endvalue-startValue）{clearInterval（interval）; } el.scrolltop+= step; }}additem関数を変更して、下部のアニメーションにスクロールを追加します。
function additem（）{index+= 1; let item = `<div id = $ {'item'+index} class = scroll_item> <span> $ {index} </span> </div>`; container.innerhtml+= item; setimeout（（）=> {// scrolltoindex（）; scrolltobottom（container）;}）}次に、HTMLの下部ボタンにスクロールを追加します。
<ボタンonclick = scrolltobottom（）>下部までスクロール</button>
上記の方法に従って、一般的に使用されるアニメーションを実装して、上部にスクロールすることもできます。
// scrolltotop関数の書き込みfunction scrolltop（el）{if（！el）{el = container; } //元の値let starttop = el.scrolltop; //最終値はendtop = 0をletします。 //アニメーション制御関数を生成するlet scrollanimationfn = doanimation（starttop、endtop、300、el）; //アニメーションを実行し、let let interval = setInterval（（）=> {scrollanimationfn（interval）}、10）}下部にスクロールするために適応するには、アニメーション停止のタイミングを変更する必要があります。修正されたdoAnimation()関数は次のとおりです。
関数doanimation（startValue、endvalue、duration、el）{//クロージャーを使用して、変数dyとステップ（各アニメーションスクロールの距離）を保存します。 let step =（endvalue-startvalue）/（duration/10）; return function（interval）{dy+= step; //ここでは、絶対値を使用して、if（math.abs（dy）> = math.abs（endvalue-startvalue））{clearinterval（interval）; } el.scrolltop+= step; }}最後に、下部ボタンにスクロールをhtml追加します。
<button onclick = scrolltotop（）>上部にスクロール</button>
効果は次のとおりです。
最初に、HTML要素に必要なボタンと入力ボックスを追加します。
<入力タイプ=番号プレースホルダー=インデックススタイルにスクロールする要素を入力してください。
指定された要素をスクロールするアニメーション実行関数を追加します。
関数ScrollToElement（containerel、el）{if（！containerel）{//親要素containerel = container; } if（！el）{//要素をスクロールして入力= document.getElementsByTagname（ 'input'）[0]; id = 'item'+input.value; if（！input.value）{id = 'item'+index; } el = document.getElementById（id）; } let starttop = containerel.scrolltop; let endtop = starttop+el.getBoundingClientRect（）。top; scrollanimationfn = doanimation（starttop、endtop、300、containerel）; let interval = setInterval（（）=> {scrollanimationfn（interval）}、10）}効果は次のとおりです。
scrollTo(x,y)の使用方法は、基本的にscrollTop属性の使用方法と同じです。親要素のscrollTo()メソッドは、スクロールバーを指定された位置に制御できます。これは、実際にはscrollTopの値を設定するのと同等です。例を挙げましょう：
//ここで、y軸スクロールを例としてemlement.scrollto（0、y）; element.scrolltop = y; //上記の2つの文の効果は同じです。
したがって、 scrollTo()メソッドを使用してScrollbarを制御することは、基本的にScrolltopの使用と同じです。 doAnimation()関数を単純に変更するだけで、コードは次のとおりです。
関数doanimation（startValue、endvalue、duration、el）{//クロージャーを使用して、変数dyとステップ（各アニメーションスクロールの距離）を保存します。 let step =（endvalue-startvalue）/（duration/10）; return function（interval）{dy+= step; if（math.abs（dy）> = math.abs（endvalue-startValue））{clearInterval（interval）; } //EL.SCROLLTOP+ = STEP;//Thisコード行は、次のEl.scrollto（0、el.scrolltop+step）に変更されます。 }}実行効果は、 scrollTopを使用した実装と一致しています。
基本的な実装
scrollBy(x,y)を使用して、Scrollbarを制御することもできます。上記のように、 scrollBy()メソッドは、Scrollbarの指定された距離を制御することです（位置ではないことに注意してください）。 Scrollby（）を使用して、指定された要素にスクロールする要件を簡単に実装します。コードは次のとおりです。
関数ScrollToElement（containerel、el）{//この値をScrollbyに渡します。つまり、指定された要素containerel.scrollby（0、el.getboundingclientRect（）。top）;}にスクロールします。下にスクロールします：
function Scrolltobottom（containerel）{let dy = containerel.scrollheight-containerel.clientheight; containerel.scrollby（0、dy）;}上にスクロールします
関数Scrolltotop（containerel）{let dy = - （containerel.scrollheight-containelel.clientheight）; containerel.scrollby（0、dy）;}アニメーションを追加します
ここでは、 scrollBy()のパラメーターが変数のオフセットであるため、アニメーションによって生成された関数を変更するため、次の変更を行います。
function Scrolltobottom（containerel）{if（！containerel）{containerel = container; } // dyはオフセットですdy = containerel.scrollheight-containerel.clientheight; scrollanimationfn = doanimation（dy、300、containerel）; let interval = setinterval（（）=> {scrollanimationfn（interval）}、10）} function scrolltop（containerel）{if（！containerel）{containerel = container; } // dyはオフセットですdy = - （containerel.scrollheight-containerel.clientheight）; scrollanimationfn = doanimation（dy、300、containerel）; let interval = setInterval（（）=> {scrollanimationfn（interval）}、10）} function scrolltoelement（containerel、el）{if（！containerel）{containerel = container; } if（！el）{let input = document.getElementsByTagname（ 'input'）[0]; id = 'item'+input.value; if（！input.value）{id = 'item'+index; } el = document.getElementById（id）; } // dyはオフセットです。 scrollanimationfn = doanimation（dy、300、containerel）; let interval = setInterval（（）=> {scrollanimationfn（interval）}、10）}/** * @description： * @param {type} * @return： */function doanimation（dy、duration、el）{//閉鎖を使用して、exe_dy = 0;実行されたlet step = dy/（duration/10）; return function（interval）{exe_dy+= step; if（math.abs（exe_dy）> = math.abs（dy））{clearinterval（interval）; } el.scrollby（0、step）; }}実行効果は、 scrollTopを使用した実装と一致しています。
上記：Point_up_2：DOMスクロールバーコントロールの詳細な要約と説明、およびいくつかの基本的な使用方法です。
これは、HTMLのDOM要素スクロールバースクロール制御概要の詳細な説明に関する記事です。より関連性の高いDOM要素スクロールバースクロールコンテンツについては、wulin.comから以前の記事を検索するか、以下の関連記事を閲覧し続けてください。将来、誰もがwulin.comをサポートすることを願っています！