element.scrollIntoView() 任意の要素をスクロールさせる

概要

• element.scrollIntoView()は、jqueryも使わずに要素のスクロール位置をコントロールできる非常にありがたい機能です。https://developer.mozilla.org/ja/docs/Web/API/Element/scrollIntoView
• いつもは({behavior: "smooth"})をとりあえずoptionに突っ込んでいましたが、blockや、inlineプロパティの理解があまりできておらず、中でもnearestの存在を先日初めて知ったのでサンプルをつくって勉強してみました。
  http://runstant.com/kasaji/projects/scrollintoview

引数

option

behavior

• auto/smoothでアニメーションを指定。デフォはauto。smoothにするとヌルッと動く

block

• start/end/nearestで垂直方向の位置を指定。
• start: 子要素がスクロールする親要素の上端で止まる
• end: 子要素がスクロールする親要素の下端で止まる
• start: 子要素が今いるスクロール位置から、start/endの近い方の位置で止まる

inline

• start/end/nearestで水平方向の位置を指定。
• start: 子要素がスクロールする親要素の左端で止まる
• end: 子要素がスクロールする親要素の右端で止まる
• start: 子要素が今いるスクロール位置から、start/endの近い方の位置で止まる

bool値

• element.scrollIntoView()でelement.scrollIntoView({block: "start", inline: "nearest"})と同じ効果
• element.scrollIntoView(false)でelement.scrollIntoView({block: "end", inline: "nearest"})と同じ効果

サンプルについて

• 左ではblockを、右ではinlineの見た目を試せます。(方向が変わっただけですが、、、)
• scrollボタンを押すと、今は画面外にいる水色の子要素がヌルッとフレームインしてきます。
• セレクトボックスで各プロパティのvalueを変更できます。nearestはどっち側にフレームアウトしているかによって挙動が変わるのがわかると思います。
• {behavior: 'smooth'}は共通で入れています。
  http://runstant.com/kasaji/projects/scrollintoview