CSS辞典 scroll-marginプロパティ、scroll-margin-top、scroll-margin-right、scroll-margin-bottom、scroll-margin-leftプロパティの解説

スナップされる位置のマージンの幅をまとめて指定する「scroll-marginプロパティ」、スナップされる位置のマージンの幅を指定する「scroll-margin-topプロパティ」、「scroll-margin-rightプロパティ」、「scroll-margin-bottomプロパティ」、「scroll-margin-leftプロパティ」使用方法を記載

対応バージョン：CSS3／2.1

対応ブラウザ
scroll-marginプロパティ
- 概要・使用方法
- サンプルコード
scroll-margin-top、left、bottom、rightプロパティ

対応ブラウザ

初期値	0
適用される要素	すべての要素
モジュール	CSS Scroll Snap Module Level 1
継承	なし

※scroll-margin-top、scroll-margin-right、scroll-margin-bottom、scroll-margin-leftすべて同様。

scroll-marginプロパティ

概要・使用方法

{ scroll-margin: -top -right -bottom -left;}

「scroll-marginプロパティ」プロパティは、スクロールコンテナー内に配置される要素がスナップされる際の外側のマージン（余白）の幅を一括して指定するプロパティです。

値の指定は半角スペースで区切って４つまで指定できます。

値が１つすべての辺に同じ値が適用されます。
値が２つ１つめが上下、２つ目が左右に適用されます。
値が３つは１つ目が上、２つ目が左右、３つ目が下に適用されます。
値が４つは１つ目が上、２つ目が右、３つ目が下、４つ目が左に適用されます。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>scroll-marginプロパティ CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>
.scroll-container-x {
  scroll-snap-type: x mandatory;
  -ms-scroll-snap-type: x mandatory;
  display: flex;
  width: 350px;
  height: 200px;
  flex-flow: row nowrap;
  overflow: auto;
  border:1px solid;
}
.x-panel-margin1 {
  width: 350px;
  height: 100%;
  font-size: 5em;
  background-color:silver;
  scroll-snap-align: center;
  text-align:center;
  vertical-align:middle;
  scroll-margin:0 2em 0 0px;
}
.x-panel-margin2 {
  align-items: center;
  justify-content: center;
  width: 350px;
  height: 100%;
  font-size: 5em;
  background-color:teal;
  scroll-snap-align: center;
  text-align:center;
  scroll-margin:0 2em 0 0px;
}
    </style>
  </head>
  <body>
<h1>scroll-margin</h1>
<div class="scroll-container-x">
  <div><div class="x-panel-margin1">1</div></div>
  <div><div class="x-panel-margin2">2</div></div>
  <div><div class="x-panel-margin1">3</div></div>
  <div><div class="x-panel-margin2">4</div></div>
  <div><div class="x-panel-margin1">5</div></div>
</div>
  </body>
</html>

scroll-margin

scroll-margin-top、left、bottom、rightプロパティ

スクロールコンテナー内の要素がスナップされる際の外側のマージン（幅）を指定します。

概要・使用方法

上側のマージンを指定します。

{ scroll-margin-top: 幅;}

下側のマージンを指定します。

{ scroll-margin-bottom: 幅;}

scroll-margin-top、scroll-margin-bottomプロパティの解説

右側のマージンを指定します。

{ scroll-margin-right: 幅;}

左側のマージンを指定します。

{ scroll-margin-left: 幅;}

scroll-margin-right、scroll-margin-leftプロパティの解説

指定できる値（幅）

数値+単位

単位付きの数値で指定します。マイナスの値も指定可能です。

単位付の数字の詳細は以下を参照

CSS辞典単位付きの数字

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>scroll-marginプロパティ CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>
.scroll-container-x {
  scroll-snap-type: x mandatory;
  -ms-scroll-snap-type: x mandatory;
  display: flex;
  width: 350px;
  height: 200px;
  flex-flow: row nowrap;
  overflow: auto;
  border:1px solid;
}
.scroll-container-y {
  scroll-snap-type: y mandatory;
  -ms-scroll-snap-type: y mandatory;
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  border:1px solid;
}
.y-panel-top1 {
  display: flex;
  align-items: center;
  background-color:silver;
  justify-content: center;
  height: 100%;
  font-size: 5em;
  scroll-snap-align: center;
  scroll-margin-top:50px;
}
.y-panel-top2 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
  background-color:teal;
  scroll-snap-align: center;
  scroll-margin-top:50px;
}
.y-panel-bottom1 {
  display: flex;
  align-items: center;
  background-color:silver;
  justify-content: center;
  height: 100%;
  font-size: 5em;
  scroll-snap-align: center;
  scroll-margin-bottom:50px;
}
.y-panel-bottom2 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
  background-color:teal;
  scroll-snap-align: center;
  scroll-margin-bottom:50px;
}
.x-panel-left1 {
  width: 350px;
  height: 100%;
  font-size: 5em;
  background-color:silver;
  scroll-snap-align: center;
  text-align:center;
  vertical-align:middle;
  scroll-margin-left:50px;
}
.x-panel-left2 {
  align-items: center;
  justify-content: center;
  width: 350px;
  height: 100%;
  font-size: 5em;
  background-color:teal;
  scroll-snap-align: center;
  text-align:center;
  scroll-margin-left:50px;
}
.x-panel-right1 {
  width: 350px;
  height: 100%;
  font-size: 5em;
  background-color:silver;
  scroll-snap-align: center;
  text-align:center;
  vertical-align:middle;
  scroll-margin-right:50px;
}
.x-panel-right2 {
  align-items: center;
  justify-content: center;
  width: 350px;
  height: 100%;
  font-size: 5em;
  background-color:teal;
  scroll-snap-align: center;
  text-align:center;
  scroll-margin-right:50px;
}
    </style>
  </head>
  <body>
<h1>margin-left</h1>
<div class="scroll-container-x">
  <div><div class="x-panel-left1">1</div></div>
  <div><div class="x-panel-left2">2</div></div>
  <div><div class="x-panel-left1">3</div></div>
  <div><div class="x-panel-left2">4</div></div>
  <div><div class="x-panel-left1">5</div></div>
</div>
<h1>margin-right</h1>
<div class="scroll-container-x">
  <div><div class="x-panel-right1">1</div></div>
  <div><div class="x-panel-right2">2</div></div>
  <div><div class="x-panel-right1">3</div></div>
  <div><div class="x-panel-right2">4</div></div>
  <div><div class="x-panel-right1">5</div></div>
</div>
<h1>margin-top</h1>
<div class="scroll-container-y">
  <div class="y-panel-top1">1</div>
  <div class="y-panel-top2">2</div>
  <div class="y-panel-top1">3</div>
  <div class="y-panel-top2">4</div>
  <div class="y-panel-top1">5</div>
</div>
<h1>margin-bottom</h1>
<div class="scroll-container-y">
  <div class="y-panel-bottom1">1</div>
  <div class="y-panel-bottom2">2</div>
  <div class="y-panel-bottom1">3</div>
  <div class="y-panel-bottom2">4</div>
  <div class="y-panel-bottom1">5</div>
</div>
  </body>
</html>