【CSS Modules】scroll-margin-bottomプロパティの使い方
scroll-margin-bottomプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
scroll-margin-bottomプロパティは、CSSのスクロールスナップ機能で、スクロールコンテナがスナップポイントに吸着する際、対象要素の下端に設定する余白（マージン）の量を定義します。このプロパティにより、自動スクロールやユーザー操作でのスクロール停止時に、要素の表示位置を細かく調整できます。
具体的には、固定ヘッダーのあるウェブサイトで、ページ内リンクなどで特定の見出しへスクロールスナップした場合、見出しがヘッダーの裏に隠れることがあります。scroll-margin-bottomプロパティに適切な値を設定すると、スクロールスナップの目標要素の下端から指定された長さ分のオフセットが考慮されます。これにより、スクロールの停止位置が調整され、対象要素がヘッダーに隠されることなく、画面上の意図した位置に適切に表示されるようになります。
このプロパティには、pxやremなどの長さの単位で値を指定します。正の値は要素の下端から内側へのマージンとして機能し、負の値も利用できます。scroll-margin-top、scroll-margin-left、scroll-margin-rightといった同系統のプロパティと組み合わせることで、スクロールスナップ時の詳細な位置調整が可能となり、ユーザー体験の向上に役立ちます。
公式リファレンス: scroll-margin-bottom
構文(syntax)
1scroll-margin-bottom: 10px;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません