CSS scroll-padding-inline-end 속성

정의와 사용법

scroll-padding-inline-end 속성은 컨테이너 끝에서 서브 요소 정렬 위치까지의 inline 방향상 거리를 지정합니다.

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

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

정렬 위치는 당신이 스크롤을 멈추면 서브 요소가 컨테이너에서 정렬된 위치를 의미합니다.

주의:이 속성은 scroll-snap-align 속성이 'end'로 설정된 경우에만 작용합니다.

보고}} scroll-padding-inline-end 속성의 효과를 볼 수 있는 경우, 자식 요소에 설정해야 합니다 scroll-snap-align 속성을 부모 요소에 설정하고 scroll-padding-inline-end 속성 및 scroll-snap-type 속성.

인스턴스

예제 1

컨테이너 끝에서 정렬 위치까지의 행 내 방향 스크롤 내 패딩을 20px로 설정합니다:

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

직접 시도해 보세요

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

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

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

직접 시도해 보세요

예제 3

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

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

직접 시도해 보세요

예제 4

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

#container {
  scroll-padding-inline-end: 20px;
  direction: rtl;
}

직접 시도해 보세요

CSS 문법

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

속성 값

기술 세부 사항

브라우저 지원

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

관련 페이지

참조:CSS 방향 속성

참조:CSS scroll-snap-align 속성

참조:CSS scroll-snap-type 속성

참조:CSS 쓰기-모드 속성