CSS scroll-padding-inline-start 속성

정의와 사용법

scroll-padding-inline-start 속성이 행 방향에서 컨테이너 시작 위치부터 자식 요소 부착 위치까지의 거리를 지정합니다.

이는 스크롤을 멈추면 스크롤이 빠르게 조정되어 부착 위치와 컨테이너 간의 지정된 거리에 멈춥니다.

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

부착 위치는 당신이 스크롤을 멈추면 자식 요소가 컨테이너에 부착된 위치를 의미합니다.

주의:이 속성은 행 방향에만 설정됩니다. scroll-snap-align 속성이 'start' 일 때만 작동합니다.

보고 싶다면 scroll-padding-inline-start 속성의 효과를 볼 수 있도록 자식 요소에 설정해야 합니다. scroll-snap-align 속성을 부모 요소에 설정하고 scroll-padding-inline-start 와 scroll-snap-type 속성.

예제

예제 1

컨테이너의 시작 위치에서 고정 위치까지 행 내 방향의 스크롤 내쪽 여백을 20px로 설정합니다:

div {
  scroll-padding-inline-start: 20px;
}

직접 시험해 보세요

예제 2: 이미지 라이브러리

scroll-padding-inline-start 속성은 고정 행동을 가진 이미지 갤러리에서 사용할 수 있으며, 이미지를 고정 요소 뒤에서 밀어낼 수 있습니다:

#container {
  scroll-padding-inline-start: 30px;
}

직접 시험해 보세요

예제 3

컨테이너 요소의 writing-mode 속성 값을 'vertical-rl'로 설정할 때, 행 내 방향에서 컨테이너와 자식 요소의 시작 위치는 위에서 오른쪽으로 이동합니다. 이는 스크롤 고정 행동 및 scroll-padding-inline-start 속성의 작동 방식:

#container {
  scroll-padding-inline-start: 20px 0;
  writing-mode: vertical-rl;
}

직접 시험해 보세요

예제 4

컨테이너 요소의 direction 속성 값을 'rtl'로 설정할 때, 행 내 방향에서 컨테이너와 자식 요소의 시작 위치는 오른쪽에서 왼쪽으로 이동하며, 컨테이너와 자식 요소의 끝 위치는 오른쪽에서 아래로 이동합니다. 이는 스크롤 고정 행동 및 scroll-padding-inline 속성의 작동 방식:

#container {
  scroll-padding-inline-start: 20px;
  diretion: rtl;
}

직접 시험해 보세요

CSS 문법

scroll-padding-inline-start: auto|value|initial|inherit;

속성 값

기술 세부 사항

브라우저 지원

표格에서의 숫자는 이 속성을 최초로 완전히 지원한 브라우저 버전을 나타냅니다.

관련 페이지

참조:CSS 방향 속성

참조:CSS scroll-snap-align 속성

참조:CSS scroll-snap-type 속성

참조:CSS 웰잉팅모드 속성