CSS scroll-margin-inline-end 속성

정의와 사용법

scroll-margin-inline-end 속성은 행 내 방향에서 끼워진 위치와 컨테이너 간의 거리를 지정합니다.

이는 스크롤을 멈추면 빠르게 조정되고, 행 내 방향에서 지정된 거리에 멈추는 것을 의미합니다. 이 거리는 자식 요소 끝의 끼워진 위치와 컨테이너 간의 거리를 의미합니다.

행 내 방향은 다음 문자가 현재 문자에 비해 행 내의 위치에 배치되는 방향을 의미하며, 이는 CSS display: inline;를 가진 태그(예: <a>와 <strong> 태그)의 텍스트 내 레이아웃 방식입니다. 행 내 방향은 쓰기 언어에 따라 다릅니다. 예를 들어, 아라비아어의 새 문자는 오른쪽에서 왼쪽으로 정렬되므로 행 내 방향은 오른쪽에서 왼쪽으로 되며, 영어 페이지의 행 내 방향은 왼쪽에서 오른쪽으로 됩니다. 행 내 방향은 CSS 속성을 통해 설정할 수 있습니다. direction 和 writing-mode 정의.

스크롤을 멈추면 자식 요소가 컨테이너 안에 끼워진 위치를 의미합니다.

注意：此属性仅在行内方向上设置了 scroll-snap-align 属性为 'end' 时才起作用。

要看到 scroll-margin-inline-end 属性的效果，必须在子元素上设置 scroll-margin-inline-end 和 scroll-snap-align 属性，并在父元素上设置 scroll-snap-type 属性。

CSS의 scroll-margin-inline 和 scroll-margin-block 属性与 CSS 属性 CSS scroll-margin-top 속성、scroll-margin-bottom、scroll-margin-left 和 scroll-margin-right 非常相似，但 scroll-margin-block 和 scroll-margin-inline 属性依赖于块方向和行内方向。

实例

例子 1

设置行内方向上从吸附位置到可滚动容器的距离：

div {
  scroll-margin-inline-end: 20px;
}

亲自试一试

例子 2

当 <div> 元素的 writing-mode 属性值设置为 vertical-rl 时，行内方向是向下。结果是元素的末端从右侧移动到底部：

div {
  scroll-margin-inline-end: 20px;
  writing-mode: vertical-rl;
}

亲自试一试

例子 3

当 <div> 元素的 direction 属性值设置为 rtl 时，行内方向是从右到左。结果是元素的末端从右侧移动到左侧：

div {
  scroll-margin-inline-end: 20px;
  direction: rtl;
}

亲自试一试

CSS 문법

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

属性值

技术细节

浏览器支持

표中的数字表示首个完全支持该属性的浏览器版本。

관련 페이지

참조:CSS 방향 속성

참조:CSS scroll-snap-align 속성

참조:CSS scroll-snap-type 속성

참조:CSS 쓰러짐 모드 속성