目录

CSS scroll-padding-left 属性


示例

将容器左侧到捕捉位置的滚动填充设置为 20px:

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

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


定义和用法

这个scroll-padding-left属性指定从容器左侧到子元素上的捕捉位置的距离。

捕捉位置是当您停止滚动时子元素在容器中卡入到位的位置。捕捉位置设置为scroll-snap-align属性,但也可能受到 CSS 属性的影响directionwriting-mode

笔记:仅当捕捉位置位于子元素的左侧时,此属性才有效。

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

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

浏览器支持

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

Property
scroll-padding-left 69.0 79.0 68.0 14.1 56.0


CSS 语法

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

属性值

Value Description
auto Default value. The browser calculates the padding
length Specifies scroll-padding-left 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-left属性可以在具有捕捉行为的图片库中使用,将图片从固定元素后面推入视图:

#container > img {
  scroll-padding-left: 30px;
}
固定的
alley bridge in jungle mountains man with camera Cinque Terre
亲自试一试 »

设置左侧的滚动填充

这个scroll-padding-left当在两个方向上设置捕捉行为时,也可以在容器上设置属性。水平滚动到下一个元素查看效果:

#container > div {
  scroll-padding-left: 30px;
}





亲自试一试 »

捕捉位置

捕捉位置必须放置在子元素的左侧scroll-padding-left属性来工作。在这个例子中direction属性值“rtl”将子元素的捕捉位置从左侧更改为右侧。有了这样的代码scroll-padding-left属性不再起作用:

#container {
  direction: rtl;
  scroll-padding-left: 30px;
}

#container > div {
  scroll-snap-align: none start;
}
亲自试一试 »

相关页面

CSS方向属性:CSS 方向属性

CSS 滚动对齐属性:CSS 滚动对齐属性

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

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