scroll-padding-block系統、scroll-padding-inline系統の評価
頻出度
(1.0)
重要度
(1.0)
総合評価
(1.0)
目次
1.scroll-padding-block系統、scroll-padding-inline系統とは?
scroll-padding-block系統、scroll-padding-inline系統のプロパティはスクロールコンテナー内の余白幅を指定する際に利用します。
これらのプロパティの対象はスクロールコンテナー内の要素に限定されます。
値の指定方法は以下の通りです。
{ scroll-padding-block-start: 値; }
{ scroll-padding-block-end: 値; }
{ scroll-padding-inline-start: 値; }
{ scroll-padding-inline-end: 値; }
値の指定方法
scroll-paddingプロパティ、個別指定の各プロパティと同じです。
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-padding-inline-end: 2rem;
}
.scroll > div: nth-child(3) {
scroll-padding-inline-end: 3rem;
}
他にも値を設定できるのでいろいろと試してみることをオススメします!