CSS scroll-padding-block-start 속성

정의와 사용법

scroll-padding-block-start 속성은 블록 방향에서 컨테이너 시작 위치부터 자식 요소 끌림 위치까지의 거리를 지정합니다.

이는 당신이 스크롤을 멈추면, 스크롤이 빠르게 조정되고, 블록 방향에서, 끌림 위치와 컨테이너 간의 지정된 거리에 멈춘다고 의미합니다.

블록 방향은 현재 행에 비해 위치한 다음 행이 배치되는 방향을 의미합니다. 이는 CSS display: block;을 가진 태그(예: <p>와 <div> 태그)가 페이지에서의 레이아웃 방식입니다. 블록 방향은 쓰기 언어에 따라 다릅니다. 예를 들어, 몽골어의 새 줄은 왼쪽에서 오른쪽으로 정렬되므로 블록 방향은 왼쪽에서 오른쪽으로, 영어 페이지의 블록 방향은 아래로입니다. 블록 방향은 CSS 속성을 통해 설정할 수 있습니다. writing-mode }

로 정의됩니다.

스크롤 체크 위치는 당신이 스크롤을 멈추면 자식 요소가 컨테이너 안에 체크되는 위치를 의미합니다.주의: scroll-snap-align 이 속성은 블록 방향의

속성이 'start'으로 설정되면만 작동합니다. scroll-padding-block-start 속성의 효과를 보려면, 자식 요소에 설정해야 합니다 scroll-snap-align 를 부모 요소에 설정하고 scroll-padding-block-start 속성 scroll-snap-type 속성.

예제

예제 1

컨테이너 시작 위치에서 체크 위치까지 블록 방향의 스크롤 내쪽 마진을 20px로 설정합니다:

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

직접 테스트해 보세요

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

스크롤 체크 행동을 가진 이미지 갤러리에서는 scroll-padding-block-start 속성이 이미지를 고정 요소 아래로 밀어냅니다:

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

직접 테스트해 보세요

예제 3

컨테이너 요소의 writing-mode 속성 값을 vertical-rl로 설정할 때, 블록 방향의 컨테이너 시작 위치와 자식 요소가 상단에서 우측으로 이동합니다. 이는 스크롤 체크 행동 및 scroll-padding-block-start 속성의 작동 방식:

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

직접 테스트해 보세요

CSS 문법

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

속성 값

기술 세부 사항

브라우저 지원

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

관련 페이지

참조:CSS scroll-snap-align 속성

참조:CSS scroll-snap-type 속성

참조:CSS 쓰이는 모드 속성