ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

Web画面でスクロールの動作が必要なら、scrollIntoView()が確実

スポンサーリンク

Webの画面で、JavaScriptによるスクロールが必要になりました。
スクロールで検索してみると、scrollTo()を使った例がありました。
developer.mozilla.org

実際に適用してみると、確かにスクロールができるようになりました。
スクロールができるようになりましたが、iframeの中の、縦に何個も並んだ要素の、見せたい個数目の要素が見える位置にスクロールするという使い方をしているためか、たまに見せたい個数目の要素が全て見える位置にスクロールがされません。
要素を追加して、scrollTo()で移動する位置を調整してみたり、scrollTo()の引数を変更してみましたが、想定通りの位置にスクロールされないときがあります。

JavaScriptをコーディング
Free Stock photos by Vecteezy

scrollIntoView()で想定通りのスクロール

複雑な計算をしないかぎり、想定通りの位置にスクロールできないのかもしれない、と思いながら、他に方法がないかと検索していたら、scrollIntoView()を使った例がありました。
developer.mozilla.org

結果は変わらないかもしれないと思いながら、scrollTo()からscrollIntoView()に置き換えてみたら、見せたい個数目の要素が見える位置に、確実にスクロールできるようになりました。
希望通りのスクロール動作です。
最初からscrollIntoView()を適用していれば、scrollTo()で試行錯誤することもありませんでした。


scrollTo()は、主要なブラウザでサポートされているので、利用上は問題ありませんが、オプションがSafariではサポートされていないようなので、オプション指定が必要な動作の場合は、使えないかもしれません。