MENU

JavaScriptDOM

【JavaScript】 追加した要素までスクロールして要素を表示する

更新日:2020/08/03

 

 

動的にDOM要素を追加したとき、その要素をユーザーの目に入る位置に表示したいことがあります。
今回は、その方法をお伝えします。

 

div要素に追加した要素までスクロール

 

例えばdiv要素内に要素を追加して、その要素を表示したいときはdiv要素の最下部まで移動させる必要がある。

 

div要素の最下部に移動

 

次のようにdiv要素の高さが固定で、overflow属性にスクロール表示可能な値がセットされているとする。

 

コード

 

css & html

 

<style>
        #tdiv{
            overflow:auto;
            height:150px;
            width:100%;
            border: 1px solid black;
        }
</style>

<div id="tdiv"></div>

 

次のコードで、div要素の最下部まで移動できます。

 

JavaScript

 


const tdiv = document.getElementById( "tdiv" );
tdiv.scrollTop = tdiv.scrollHeight;

 

解説

 

scrollTopは表示されているエリアの上座標です。
scrollHeightは、表示されていないエリアも含めた高さです。

 

最下部を表示したときのscrollTopの値は、scrollHeightから表示されている高さを引いた値です。
scrollTopにそれ以上の値(scrollHeight)をセットすると、自動で補正されます。

 

デモ

 

 

scrollTopMaxは、scrollTopに設定できる最大値です。
ただし標準的な機能でないため、一部のブラウザのみで使用できます。

 

追加した要素まで移動

 

div要素に追加した要素が表示エリアの高さより大きい場合、最下部までスクロールしてしまうと見た目がよくありません。

 

この場合、追加した要素の上端がdiv要素内に収まるように移動させます。

 

コード

 

css & html

 

<style>
        #tdiv{
            overflow:auto;
            height:150px;
            width:100%;
            border: 1px solid black;
        }
        .adddiv{
            height:200px;
            width:80%;
            margin: 10px auto;
            border: 1px solid black;
        }
</style>

<div id="tdiv"></div>

 

#tdiv内にadddivクラスを持つdiv要素を追加します。

 

このとき、次のコードで追加した要素の上端まで移動できます。

 

JavaScript

 


const tdiv = document.getElementById( "tdiv" );

const adddiv = document.createElement("div");
adddiv.classList.add("adddiv");

tdiv.appendChild(adddiv);
adddiv.scrollIntoView({block:"nearest"});

 

解説

 

scrollIntoViewメソッドは、親要素の位置とスクロール設定を補正して、要素をブラウザ上に表示します。

 

指定する引数によって、表示のされ方が変わります。

 

true : 要素の上端が表示されるのに加え、親要素も可能な範囲で上端に移動します。

 

false : 要素の下端が表示されるのに加え、親要素も可能な範囲で下端に移動します。

 

真偽値の他に、オブジェクトで指定できます。

 

{
    behavior : アニメーションの方法 "auto" または "smooth"

    block : 上下方向の移動
              "start" 上端 
              "center" 中央 
              "end" 下端 
              "nearest" 現在位置からまり移動させない

    block : 上下方向の移動
              "start" 左端 
              "center" 中央 
              "end" 右端 
              "nearest" 現在位置からまり移動させない
}

 

デモ

 

ページ下部までスクロールさせる

 

ページ下部までスクロールして表示させたいときは、次のコードを使用します。

 

 


window.scrollTo(0,document.documentElement.scrollHeight);

 

実際の目的はページ下部にある要素を表示したいというケースが多いと思います。

 

その場合は、表示したい要素にIDを付加してscrollIntoViewメソッドを使用してください。

 

 

記事の内容について

 

こんにちはけーちゃんです。
説明するのって難しいですね。


「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。

そんなときは、ご意見もらえたら嬉しいです。

ご意見はこちら。
https://affi-sapo-sv.com/info.php