码农教程 - 一技在手,衣食无忧! tools

目录

CSS scroll-padding-block 属性

❮上一节 完整的CSS参考 下一节❯

示例

将块方向上从容器到捕捉位置的滚动填充设置为 20px：

div {
  scroll-padding-block: 20px;
}
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个scroll-padding-block属性指定块方向上从容器到子元素上的捕捉位置的距离。

这意味着当您停止滚动时，滚动将快速调整并停止在块方向上、捕捉位置和容器之间的指定距离处。

块方向是下一行相对于现有行的位置的放置位置，这也是 CSS 标签的方式display: block;像 <p> 和 <div> 标签一样布置在页面上。块方向取决于书面语言，即蒙古文，其中新行从左到右布置，这使得块方向从左到右，而英文页面具有向下的块方向。块方向可以用 CSS 属性定义writing-mode。

捕捉位置是当您停止滚动时子元素在容器中卡入到位的位置。

笔记：仅当滚动对齐属性设置为块方向的“开始”或“结束”时，此属性才有效。

这个scroll-padding-blockproperty 是以下属性的简写属性：

scroll-padding-block属性的值可以通过不同的方式设置：

如果scroll-padding-block属性有两个值：

  • 滚动填充块：10px 50px；
    • 起始距离为 10px
    • 末端距离为 50px

如果scroll-padding-block属性只有一个值：

  • 滚动填充块：10px；
    • 开始和结束的距离是 10px

来看看效果scroll-padding-block属性，scroll-snap-align必须在子元素上设置属性，并且scroll-padding-block和scroll-snap-type必须在父元素上设置属性。

CSSscroll-padding-block和scroll-padding-inline属性与 CSS 属性非常相似scroll-padding-top,scroll-padding-bottom,scroll-padding-left和scroll-padding-right，但是scroll-padding-block和scroll-padding-inline属性取决于块和内联方向。

默认值： 汽车
遗传： 不
可动画： 不。阅读可动画的
版本： CSS3
JavaScript 语法： 对象.style.scrollPaddingBlock="20px"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
scroll-padding-block 69.0 79.0 68.0 15.0 56.0

CSS 语法

scroll-padding-block: auto| value|initial|inherit;

属性值

Value Description
auto Default value. The browser calculates the padding
length Specifies scroll-padding-block in px, pt, cm, etc. Negative values are not allowed. Read about length units
% Specifies the padding in percent of the width of the containing element
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

更多示例

图片库

这个scroll-padding-block属性可以在具有捕捉行为的图片库中使用，将图片推送到固定元素下方：

#container {
  scroll-padding-block: 30px 0;
}
固定顶部元件
alley bridge in jungle mountains man with camera Cinque Terre
亲自试一试 »

示例

随着writing-mode将容器元素的属性值设置为vertical-rl，容器及子元素在块方向的开始位置从上移至右侧，容器及子元素的结尾位置从下移至左侧。这会影响滚动捕捉行为以及滚动填充块属性的工作方式：

#container {
  scroll-padding-block: 20px 0;
  writing-mode: vertical-rl;
}
亲自试一试 »

相关页面

CSS 滚动填充块结束属性：CSS 滚动填充块结束属性

CSS 滚动填充块开始属性：CSS 滚动填充块开始属性

CSS 滚动对齐属性：CSS 滚动对齐属性

CSS 滚动捕捉类型属性：CSS Scroll-snap-type 属性

CSS 写入模式属性：CSS 书写模式属性


❮上一节 完整的CSS参考 下一节❯