CSS scroll-padding-inline 속성

정의와 사용법

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

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

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

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

주의:이 속성은 행 내 방향에 대해서만 적용됩니다.scroll-snap-align 속성 값을 'start' 또는 'end'로 설정할 때만 유효합니다。

scroll-padding-inline 속성은 다음 속성의 줄임말 속성입니다:

• scroll-padding-inline-start
• scroll-padding-inline-end

scroll-padding-inline 속성 값은 다양한 방식으로 설정할 수 있습니다:

scroll-padding-inline 속성에 두 가지 값이 있는 경우:

scroll-padding-inline: 10px 50px;

• 시작점의 거리가 10px입니다
• 종료점의 거리가 50px입니다

scroll-padding-inline 속성에 값이 하나인 경우:

scroll-padding-inline: 10px;

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

보고 싶은 경우 scroll-padding-inline 속성의 효과를 보려면 반드시 자식 요소에 설정해야 합니다 scroll-snap-align 속성을 부모 요소에 설정하며 scroll-padding-inline 와 scroll-snap-type 속성。

CSS의 scroll-padding-block 와 scroll-padding-inline 속성과 CSS 속성 CSS scroll-padding-top 속성、scroll-padding-bottom、scroll-padding-left 와 scroll-padding-right 매우 유사하지만 scroll-padding-block 와 scroll-padding-inline 속성은 블록 방향과 내부 방향에 따라 의존합니다.

예제

예제 1

내부 방향의 스크롤 내간격을 설정하여 컨테이너에서吸附 위치까지 20px로 설정합니다:

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

직접 시도해 보세요

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

스크롤 애니메이션 행동을 가진 이미지 갤러리에서는 scroll-padding-inline 속성은 이미지를 고정 요소 뒤로 밀어냅니다:

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

직접 시도해 보세요

예제 3

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

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

직접 시도해 보세요

예제 4

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

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

직접 시도해 보세요

CSS 문법

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

속성 값

기술 세부 사항

브라우저 지원

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

관련 페이지

참조:CSS 방향 속성

참조:CSS scroll-snap-align 속성

참조:CSS scroll-snap-type 속성

참조:CSS 라이팅-모드 속성