JSの座標取得で四苦八苦してscrollIntoViewを使ったお話

今回はJSのお話です。
メチャクチャ苦労してCopilotから情報を抜き出しました。
とにかく以下が成果物なので見てください。

function Scroll_NowPoint() {
    "use strict";
    var element = document.getElementById("now_chip");
    element.scrollIntoView({ block: 'center', inline: 'center' });
}

now_chipという要素へ自動的にスクロールする関数です。
scrollByやscrollToはy軸方向には効きますが、
要素の関係かCSSの関係かx軸には全く効きませんでした。

困った挙句scrollIntoViewの{ inline: ‘center’ }オプションだったら
x軸方向への要素位置センタリングスクロールが効くかもしれない
とのご宣託をいただき、実際に試したところ
きちんとx軸方向にもセンタリングされました。
またblock: ‘center’もいれることでy軸方向へのセンタリングも含めることが出来ました。

scrollByやscrollToで困っている方（特にモバイル端末向け）にはおススメです。
scrollIntoView使えます。是非お試しあれ。

※ただし注意点として全てのブラウザ、モバイル端末上で動くかどうかは分からないそうです

関連投稿: