CSS scroll-padding-block 属性

CSS 的 scroll-padding-block 属性是一个比较新的属性，它用于设置滚动容器在块方向（垂直方向）上的滚动条内边距。这个属性可以让我们更好地控制滚动容器的滚动效果。

语法

scroll-padding-block: <length> | <percentage> | auto;

属性值

属性值有三种：长度值、百分比值，以及 auto 值。

• <length>表示一个长度值。可以是 px、em、rem 等 CSS 长度单位。这个值表示滚动条内边距的大小。
• <percentage>表示一个百分比值。表示滚动条内边距的大小的百分比。
• auto表示滚动条内边距自动计算。当一侧内边距小于一页的大小时，将自动为该侧添加适当的内边距，以保证滚动滑块能够滑到底部。如果一侧内边距已经达到一页的大小，就不会再添加内边距了。

示例

.scroll-container {
  overflow-y: scroll;
  scroll-padding-block: 20px;
}

这个示例将在垂直方向上设置滚动容器的滚动条内边距为 20px。

.scroll-container {
  overflow-y: scroll;
  scroll-padding-block: 10%;
}

这个示例将在垂直方向上设置滚动容器的滚动条内边距为容器高度的 10%。

.scroll-container {
  overflow-y: scroll;
  scroll-padding-block: auto;
}

这个示例将让浏览器自动计算滚动条的内边距。