naopoyo.com
  • Docs
  • Tags
  • Bookmarks
  • Tools
  • About
  • Docs
  • Tags
  • Bookmarks
  • Tools
  • About

目次

© naopoyo

🌳

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

公開日
2年近く前
2024-01-09
更新履歴
GitHubで見る
  • CSS
  • 開発日記
  • Next.js

サイトヘッダーを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のように現在のパスを取得したい

Next.js Server ComponentでCurrent URLを取得したい
zenn.dev favicon
zenn.dev
Next.js Server ComponentでCurrent URLを取得したい

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

Add get-pathname function by alexdln · Pull Request #59909 · vercel/next.js
Since this PR is not being merged, I&#39;ll leave a recommendation to use @nimpl/getters at the top here. Adding a feature What? Ability to obtain the path in server components Why? I understand t...
github.com favicon
github.com
Add get-pathname function by alexdln · Pull Request #59909 · vercel/next.js

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

TypeScriptのセミコロン

セミコロンに関する ESLint ルール - Qiita
まえがき ESLint seems like the light saber of the ASI Wars these days.— Nicholas C. Zakas (@slicknet) 2018年1月12日 JavaScript の言語仕様に ASI 利用...
qiita.com favicon
qiita.com
セミコロンに関する ESLint ルール - Qiita
naopoyo
naopoyo
@naopoyo_tw
·Follow

TypeScriptのセミコロンはつける派が多いのかつけない派が多いのか

3:29 PM · Jan 9, 2024
1
Reply
Read more on X

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

目次

最近更新された記事

🛷
開発日記-2025-10-29 / tocbot のオプション
約13時間前 - 2025年10月29日
  • 開発日記
  • tocbot
🚩
Next.js 16にアップグレードする
1日前 - 2025年10月27日
  • Next.js
✒️
エンジニア個人ブログまとめ
2日前 - 2025年10月27日
  • デザイン
  • Next.js
  • Markdown