目录

CSS scroll-margin-inline 属性


示例

设置内联方向上从捕捉位置到可滚动容器的距离:

div {
  scroll-margin-inline: 20px;
}
亲自试一试 »

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


定义和用法

这个scroll-margin-inline属性指定捕捉位置和容器之间沿内联方向的距离。

这意味着当您停止滚动时,滚动将快速调整并停止在对齐位置和容器之间的内联方向上的指定距离处。

内联方向是与一行中现有字符的位置相比下一个字符的放置位置,这也是 CSS 标签的方式display: inline;像 <a> 和 <strong> 标签一样布置在文本中。内联方向取决于书面语言,即阿拉伯语,其中新字符从右到左布局,这使得内联方向从右到左,而英语页面具有从左到右的内联方向。内联方向可以使用 CSS 属性定义directionwriting-mode

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

这个scroll-margin-inlineproperty 是以下属性的简写属性:

scroll-margin-inline属性的值可以通过不同的方式设置:

如果scroll-margin-inline属性有两个值:

  • 滚动边距内联:20px 70px;
    • 起始距离为 20px
    • 末端距离为 70px

如果scroll-margin-inline属性只有一个值:

  • 滚动边距内联:20px;
    • 开始和结束的距离是 20px

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

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

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

浏览器支持

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

Property
scroll-margin-inline 69.0 79.0 68.0 14.1 56.0


CSS 语法

scroll-margin-inline: 0| value|initial|inherit;

属性值

Value Description
0 Default. The element's default scroll-margin-inline distance.
length Specifies distance in px, pt, cm, etc. Negative values are allowed. Read about length units
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

更多示例

示例

随着writing-mode<div> 元素的属性值设置为vertical-rl,内联方向为向下。结果是元素的开头从左侧移动到顶部,元素的结尾从右侧移动到底部。这也影响了scroll-margin-inline属性:

div {
  scroll-margin-inline: 20px 0;
  writing-mode: vertical-rl;
}
亲自试一试 »

示例

随着direction<div> 元素的属性值设置为 rtl,内联方向为从右到左。结果是元素的开头从左侧移动到右侧,元素的结尾从右侧移动到左侧。这也影响了scroll-margin-inline属性:

div {
  scroll-margin-inline: 0 20px;
  direction: rtl;
}
亲自试一试 »

相关页面

CSS方向属性:CSS 方向属性

CSS 滚动边距内联结束属性:CSS 滚动边距内联结束属性

CSS 滚动边距内联开始属性:CSS 滚动边距内联开始属性

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

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

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