DOM

：

：

Element.scrollIntoView() メソッド

　編集：2022.09.23 by T.A.

[Edge]。→

element をユーザーに見えるところまで、親コンテナーをスクロールします。

構文
element.scrollIntoView([alignToTop])
element.scrollIntoView(Options)
element Element。
alignToTop Boolean。

true の場合、要素の上端がスクロール可能な祖先の表示範囲の上端に来るようにスクロールします。Options＝{block: "start", inline: "nearest"} に相当します。これが既定値です。

false の場合、要素の下端がスクロール可能祖先の表示範囲の下端に来るようにスクロールします。Options＝{block: "end", inline: "nearest"} に相当します。

Options 以下のプロパティを持つオブジェクトです。
behavior 省略可。推移のアニメーションを以下の1つの文字列で指定します。
auto ¶。規定値。
smooth
block 省略可。垂直方向の配置を以下のうち1つを指定します。
start ¶親コンテナー内で上位置。規定値。
center ¶親コンテナー内で中央位置。
end ¶親コンテナー内で下位置。
nearest
inline 省略可。水平方法の配置を以下のうち1つを指定します。
start ¶親コンテナー内で左位置。
center ¶親コンテナー内で中央位置。
end ¶親コンテナー内で右位置。
nearest ¶。規定値。
戻り値

メモ

他の要素のレイアウトによっては、要素の上部または下部まで完全にスクロールされない場合があります。

例
var element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});

HTML： 

<DIV id=IdSoto style="width:100px; height:100px; overflow:scroll; border:1px solid red; font-size:20px;">
  あ<BR>
  あ<BR>
  あ<BR>
  あ<BR>
  あ<BR>
  あ<BR>
  <SPAN id=IdTest>abcdefghijkl<BR>mn</SPAN>
  い<BR>
  い<BR>
  い<BR>
  い<BR>
  い<BR>
  い<BR>
</DIV>

JavaScript： 

IdTest.scrollIntoView(true);

親コンテナーとは、offsetParent で示す要素かもしれない。

JavaScript：Options 使用。 

IdTest.scrollIntoView({block:'center'}); //垂直位置を中央で。

HTML： 

<TABLE><TR><TD>
<DIV id=IdSoto style="width:100px; height:100px; overflow:scroll; border:1px solid red; font-size:20px;">
  あ<BR>
  あ<BR>
  あ<BR>
  あ<BR>
  あ<BR>
  あ<BR>
  <SPAN id=IdTest>abcdefghijkl<BR>mn</SPAN>
  い<BR>
  い<BR>
  い<BR>
  い<BR>
  い<BR>
  い<BR>
</DIV>
</TABLE>

JavaScript： 

IdTest.scrollIntoView(true);

これで試したが、offsetParent は [object HTMLTableCellElement] であるけど、文書が親コンテナーとなっているようです。

テスト