CSS 스크롤 패딩 블록 끝 속성

정의와 사용법

scroll-padding-block-end 속성은 블록 방향에서 컨테이너 끝에서 자식 요소吸附 위치까지의 거리를 지정합니다.

이를 의미하면, 당신이 스크롤을 멈추면, 스크롤이 빠르게 조정되고, 블록 방향에서,吸附 위치와 컨테이너 사이의 지정된 거리에서 멈춥니다.

블록 방향은 현재 행에 비해의 위치를 의미하며, 다음 행이 배치되는 방향입니다. 이것은 CSS display: block;를 가진 태그(예: <p>와 <div> 태그)가 페이지 상에 레이아웃되는 방식입니다. 블록 방향은 쓰기 언어에 따라 다릅니다. 예를 들어, 몽골어의 새 줄은 왼쪽에서 오른쪽으로 정렬되기 때문에 블록 방향은 왼쪽에서 오른쪽으로, 영어 페이지의 블록 방향은 아래로입니다. 블록 방향은 CSS 속성 writing-mode 来定义。

로 정의됩니다.

잠금 위치는 당신이 스크롤을 멈추면 자식 요소가 컨테이너 내에서 잠금된 위치를 나타냅니다.주의: scroll-snap-align 이 속성은 블록 방향의

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

예제

예제 1

컨테이너 끝에서 잠금 위치까지 블록 방향의 스크롤 내쪽 여백을 20px로 설정합니다:

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

직접 시도해 보세요

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

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

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

직접 시도해 보세요

예제 3

컨테이너 요소의 writing-mode 속성 값을 vertical-rl로 설정할 때, 블록 방향의 컨테이너 끝과 자식 요소가 아래에서 왼쪽으로 이동합니다. 이는 스크롤 잠금 행동 및 scroll-padding-block-end 속성이 작동하는 방식:

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

직접 시도해 보세요

CSS 문법

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

속성 값

기술 세부 사항

브라우저 지원

표中的数字은 해당 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

相关页面

참조:CSS 스크롤 스나ップ 알라인 속성

참조:CSS 스크롤 스나ップ 타입 속성

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