DOM

：

：

Element.scrollIntoViewIfNeeded() メソッド

　編集：2022.09.23 by T.A.

[Edge]。非標準。→、

非標準： この機能は非標準であり、標準トラックにはありません。Web に面している実稼働サイトでは使用しないでください。すべてのユーザーに対して機能するとは限りません。また、実装間に大きな非互換性がある可能性があり、将来的に動作が変更される可能性があります。

element がブラウザー ウィンドウの表示領域内にない場合にスクロールさせて見えるようにします。そして親コンテナー内で配置される。

mdn： ブラウザー ウィンドウの表示領域内にない場合、現在の要素をブラウザー ウィンドウの表示領域にスクロールします。要素が既にブラウザー ウィンドウの表示領域内にある場合、スクロールは行われません。このメソッドは、標準の Element.scrollIntoView() メソッドの独自のバリエーションです。

構文
element.scrollIntoViewIfNeeded([centerIfNeeded])
element Element。
centerIfNeeded 省略可。デフォルトが true のオプションのブール値:
  • true の場合、スクロール可能な祖先の表示領域内の中央に配置されるように要素が配置されます。
  • false の場合、要素はスクロール可能な祖先の可視領域の最も近い端に配置されます。要素に最も近い可視領域の端に応じて、要素の上部が可視領域の上端に揃えられるか、または、要素の下端が表示領域の下端に揃えられます。
戻り値

なし（undefined）。

仕様

仕様の一部ではありません。これは、独自の WebKit 固有のメソッドです。

例

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.scrollIntoViewIfNeeded(true); //DIVの中のSPANを、

DIVの中で見えるようにスクロールされた。scrollIntoView() とは異なる動作をしている。 

IdSoto.scrollIntoViewIfNeeded(true); //DIVを、

文書の中で見える所までスクロールされた。

scrollIntoViewIfNeeded()の場合は、親ボックス内で可視になるようにスクロールされますね。

テスト