CSS scroll-margin-inline 속성

정의와 사용법

scroll-margin-inline 속성은 인라인 방향에서 접착 위치와 컨테이너 간의 거리를 지정합니다.

이는 스크롤을 멈추면, 스크롤이 빠르게 조정되고 접착 위치와 컨테이너 간의 지정된 거리에 인라인 방향으로 멈추는 것을 의미합니다.

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

접착 위치는 스크롤이 멈추면 자식 요소가 컨테이너에 접착하는 위치를 의미합니다.

scroll-margin-inline 속성은 다음 속성의 요약 속성입니다:

• scroll-margin-inline-start
• scroll-margin-inline-end

scroll-margin-inline 속성에 두 가지 값이 있을 때:

scroll-margin-inline: 20px 70px;

• 시작점의 거리는 20px입니다
• 종료점의 거리는 70px입니다

scroll-margin-inline 속성에 값이 하나 있을 때:

scroll-margin-inline: 20px;

• 시작점과 종료점의 거리는 모두 20px입니다

보고 싶습니다 scroll-margin-inline 속성의 효과는 자식 요소에 설정해야 합니다 scroll-margin-inline 와 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: 20px;
}

직접 시험해 보세요

예제 2

when the <div> element's writing-mode 속성 값을 vertical-rl로 설정할 때, 행 내 방향은 아래로입니다. 결과는 요소의 시작 위치가 왼쪽에서 위쪽으로 이동하고, 요소의 끝 위치가 오른쪽에서 아래로 이동합니다. 이는 또한 scroll-margin-inline 속성:

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

직접 시험해 보세요

예제 3

when the <div> element's direction 속성 값을 rtl로 설정할 때, 행 내 방향은 오른쪽에서 왼쪽입니다. 결과는 요소의 시작 위치가 왼쪽에서 오른쪽으로 이동하고, 요소의 끝 위치가 오른쪽에서 왼쪽으로 이동합니다. 이는 또한 scroll-margin-inline 속성:

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

직접 시험해 보세요

CSS 문법

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

속성 값

기술 세부 사항

浏览器支持

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

관련 페이지

참조:CSS 방향 속성

참조:CSS scroll-margin-inline-end 속성

참조:CSS scroll-margin-inline-start 속성

참조:CSS scroll-snap-align 속성

참조:CSS scroll-snap-type 속성

참조:CSS 쓰기-모드 속성