scroll-magin-topとscroll-padding-topは何が違うの？どう使い分けるの？
2025.03.24
ページ内のヘッダーをdisplay: fix;などで上部に固定している場合、アンカーリンクを使ってページをスクロールすると、スクロール先がヘッダーの下に隠れてしまうという問題があります。アンカーリンクのスクロール先がビューポート（表示エリア）の最上部に来るためです。
この問題を解消するのがscroll-margin-top と scroll-padding-topという二つのプロパティです。ところが、二つあるので何が違うのかわかりづらいと思います。
scroll-margin-top と scroll-padding-top は似ていますが、用途が異なるので次の基準で使い分けると良いです。
scroll-margin-top の特徴
- リンク先の要素（アンカーのターゲット）に指定する
- ページ内リンクのずれ防止に最適
- HTMLの構造変更が不要
例：ページ内リンクの調整
h2 {
scroll-margin-top: 80px; /* 固定ヘッダーの高さ分 */
}scroll-padding-top の特徴
- スクロールコンテナ（例：
bodyやmainなど）に指定する - スクロール位置の基準をずらすイメージ
- 無限スクロールやインタラクティブなUIに便利
例：スクロール全体の余白調整
html {
scroll-padding-top: 80px; /* 固定ヘッダーの高さ分 */
}どちらを使うべき？
ページ内リンクのズレ防止 ➔ scroll-margin-top
スクロール全体の基準調整 ➔ scroll-padding-top
実用例
- ヘッダーが固定されたサイトでページ内リンクのズレを防ぐなら…
→scroll-margin-topが最適 - SPA（シングルページアプリ）などで、要素のロードや非同期コンテンツが頻繁に切り替わるなら…
→scroll-padding-topが便利