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

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera
初期値0
適用される要素すべての要素
モジュールCSS Scroll Snap Module Level 1
継承なし

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

scroll-marginプロパティ

概要・使用方法

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

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

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

  • 値が1つすべての辺に同じ値が適用されます。
  • 値が2つ1つめが上下、2つ目が左右に適用されます。
  • 値が3つは1つ目が上、2つ目が左右、3つ目が下に適用されます。
  • 値が4つは1つ目が上、2つ目が右、3つ目が下、4つ目が左に適用されます。

サンプルコード

<!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

1
2
3
4
5

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プロパティの解説

指定できる値(幅)

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

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

サンプルコード

<!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>

margin-left

1
2
3
4
5

margin-right

1
2
3
4
5

margin-top

1
2
3
4
5

margin-bottom

1
2
3
4
5