CSS scroll-margin Generator

scroll-marginプロパティを生成。スクロールスナップ時のマージンを制御します。

Configuration

Unit

Top

Right

Bottom

Left

Use shorthand notation

Visual Preview

0px

Element

Generated CSS

scroll-margin: 0px;

Usage Example

.scroll-item {
  scroll-margin: 0px;
  scroll-snap-align: start;
}

HTML Example

<div class="scroll-container">
  <div class="scroll-item">Item 1</div>
  <div class="scroll-item">Item 2</div>
  <div class="scroll-item">Item 3</div>
</div>

scroll-marginとは

scroll-marginは、スクロールスナップコンテナ内の要素がスナップする際のマージンを定義します。固定ヘッダーやナビゲーションバーの高さ分をオフセットする際に特に有用です。

scroll-margin: 4方向すべてのマージンを一括設定

scroll-margin-top: 上方向のマージン（固定ヘッダー対策に最適）

scroll-snap-align: と組み合わせて使用します