🌳

開発日記-2024-01-09 / scroll-padding、scroll-marginについて

公開日
10か月前
2024-01-09
更新履歴

サイトヘッダーをstickyで固定した場合のscroll-padding、scroll-marginについて

サイト上部にサイトヘッダーやナビゲーションバーなどの要素を position: sticky;position: fixed; で固定した場合、https://example.com/post#heading のようなアンカーリンクでの移動のズレを無くすための設定について。

:root {
  scroll-padding-top: 64px;
}

上記のように全体に scroll-padding-top を指定するよりも、以下のようにアンカーの部分に scroll-margin-top を指定した方が良さそう。

.heading {
  scroll-margin-top: 64px;
}
<h2 id="heading" class="heading">見出し</h2>

scroll-padding-top を使った場合に、shadcn/uiのDropdown Menuの挙動がおかしくなった。Dropdown Menuを閉じたときに変なスクロールが発生した。

Next.jsのサーバーコンポーネントでusePathnameのように現在のパスを取得したい

今のところはサーバーコンポーネントで取得するにはmiddlewareを使うしかないらしい。クライアントコンポーネントにして usePathname を使うことにした。

getPathname が早く使えるようになったらいいのに。

TypeScriptのセミコロン

つけない派なのだが、つけた方がいいのか悩んでいる。