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

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

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

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

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

```css
.heading {
  scroll-margin-top: 64px;
}
```

```html
<h2 id="heading" class="heading">見出し</h2>
```

`scroll-padding-top` を使った場合に、shadcn/uiの[Dropdown Menu](https://ui.shadcn.com/docs/components/dropdown-menu)の挙動がおかしくなった。Dropdown Menuを閉じたときに変なスクロールが発生した。

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

::link-card[https://zenn.dev/kaitok/articles/fd66b9c10cfde1]

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

::link-card[https://github.com/vercel/next.js/pull/59909]

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

## TypeScriptのセミコロン

::link-card[https://qiita.com/mysticatea/items/9da94240f29ea516ae87]

::x-post[https://twitter.com/naopoyo_tw/status/1744743240937639989]

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