📜

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

1 min read

概要

引数

option

behavior

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

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"})と同じ効果

サンプルについて

image.png

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

Discussion

ログインするとコメントできます