write ahead log

ロールフォワード用

画像ギャラリーみたいなものの実装にscrollIntoViewが便利だった

画像のギャラリーにサムネイルリストみたいなのがほしいねってなった.

常にユーザーに見えるように自動でスクロールを動かしたいな, ってなった時実装が面倒くさい.移動量を計算してscrollToを使うイメージがあった.

ところがググると今は専用のAPIが生えている.

Element: scrollIntoView() メソッド - Web API | MDN

ユーザーに見えるようにいい感じに移動してくれる.これはありがたい.

ところでこのAPIは常にスクロールしようとしてくる.

見えているなら別に移動しなくていいのに.と思っていたらexperimentalでまたAPIが生えている.

Element: scrollIntoViewIfNeeded() method - Web APIs | MDN

こいつを使いたいのでPonyfillを探してきた.

https://scroll-into-view.dev/scroll-into-view.dev

しかも大変ありがたいことに, このPonyfillにはboundaryが設定できる.

https://scroll-into-view.dev/#limit-propagation

これで指定要素内だけで自動スクロールもさせられるようになった.