Open4
nuxt での scroll-padding / scroll-margin
ピン留めされたアイテム
zakuroNuxt でページ内のアンカーリンクに scroll-padding を使用しようとしたが動作せず、調べるのに時間を溶かしたのでメモ。
zakurofixed な header があるときにアンカーリンクを使用すると、対象がページの一番上に来る位置に移動するため、header で隠れてしまう。
scroll-padding をつかうと、この問題を比較的簡単に解決できる。
zakuroただし、Nuxt の場合アンカーリンクでのスクロールが Router の scrollBehavior で制御されており、 <nuxt-link> で移動すると scroll-padding が考慮されない。
zakuroscroll-margin-top のみ考慮されるようになっているので、これを使用すると同様のことができる。
scroll-padding の場合はページ全体に指定できるが、scroll-margin-top は対象の要素に指定する必要がある。
普通にやると面倒だが、id を持っている要素すべてに指定するという大雑把な方法で簡単に書ける。
html { scroll-padding-top: 10px; }
[id] { scroll-margin-top: 10px; } /* 上とほぼ等価 */