2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

[CSS] scroll-margin-block系統、scroll-margin-inline系統のプロパティで書字方向に応じてスナップされる位置のマージン幅を指定しよう!

scroll-margin-block系統、scroll-margin-inline系統の評価
頻出度
(1.0)
重要度
(1.0)
総合評価
(1.0)




1.scroll-margin-block系統、scroll-margin-inline系統とは?

scroll-margin-block系統、scroll-margin-inline系統のプロパティはスクロールコンテナー内に配置される要素がスナップされる際の外側の余白の幅を指定する際に利用します。

これらのプロパティの対象はスクロールコンテナー内の要素に限定されます。

値の指定方法は以下の通りです。

{ scroll-margin-block-start: 値; }

{ scroll-margin-block-end: 値; }

{ scroll-margin-inline-start: 値; }

{ scroll-margin-inline-end: 値; }

値の指定方法

scroll-marginプロパティ、個別指定の各プロパティと同じです。




2.scroll-margin-block系統、scroll-margin-inline系統の使い方

それではscroll-margin-block系統、scroll-margin-inline系統の使い方をみていきましょう。

.scroll {
 width: 300px;
 height: 300px;
 overflow-x: scroll;
 display: flex;
 box-sizing: border-box;
 scroll-snap-type: x mandatory;
}

.scroll > div {
 flex: 0 0 300px;
 border: 1px solid #000;
 background-color: #57e714;
 color: #fff;
 font-size: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
 scroll-snap-align: end;
}

.scroll > div: nth-child(2n) {
 background-color: #fff;
 color: #0fe962;
}

.scroll > div: nth-child(2) {
 scroll-margin-inline-end: 2rem;
}

.scroll > div: nth-child(3) {
 scroll-margin-inline-end: 3rem;
}

他にも値を設定できるのでいろいろと試してみることをオススメします!




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です