CSS 스크롤 패딩 블록 속성
- 이전 페이지 scroll-padding
- 다음 페이지 scroll-padding-block-end
정의와 사용법
scroll-padding-block 속성은 블록 방향에서 컨테이너에서 자식 요소 어셋션 위치까지의 거리를 지정합니다.
이는 스크롤을 멈추면 스크롤이 빠르게 조정되고, 블록 방향에서 어셋션 위치와 컨테이너 간의 지정된 거리에서 멈춘다는 것을 의미합니다.
블록 방향은 기존 행 위치에 비해 다음 행을 배치하는 방향을 의미합니다. 이것은 CSS display: block;을 가진 태그(예: <p>와 <div> 태그)가 페이지 상에 배치되는 방식입니다. 블록 방향은 글쓰기 언어에 따라 다릅니다. 예를 들어, 몽골어에서는 새 줄이 왼쪽에서 오른쪽으로 정렬되므로 블록 방향도 왼쪽에서 오른쪽으로 되며, 영어 페이지는 아래로 향하는 블록 방향을 가집니다. 블록 방향은 CSS 속성 writing-mode 정의.
어셋션 위치는 당신이 스크롤을 멈추면 자식 요소가 컨테이너 안에 어셋션되는 위치를 의미합니다.
주의:이 속성은 블록 방향에 대해서만 적용됩니다.scroll-snap-align 속성이 'start' 또는 'end'로 설정되면 유효합니다.
scroll-padding-block 속성은 다음 속성의 약자 속성입니다:
scroll-padding-block 속성의 값은 다양한 방법으로 설정할 수 있습니다:
scroll-padding-block 속성에 두 가지 값이 있다면:
scroll-padding-block: 10px 50px;
- 시작점의 거리는 10px입니다
- 끝점의 거리는 50px입니다
scroll-padding-block 속성에 값이 하나 있다면:
scroll-padding-block: 10px;
- 시작점과 끝점의 거리는 모두 10px입니다
보고 싶습니다 scroll-padding-block 속성의 효과는 반드시 자식 요소에 설정해야 합니다 scroll-snap-align 속성을 부모 요소에 설정하면 scroll-padding-block 와 scroll-snap-type 속성.
CSS의 scroll-padding-block 와 scroll-padding-inline 속성은 CSS 속성 CSS 스크롤 패딩 상단 속성、scroll-padding-bottom、scroll-padding-left 와 scroll-padding-right 매우 유사하지만 scroll-padding-block 와 scroll-padding-inline 속성은 블록 방향과 행 내 방향에 따라 종속됩니다.
예제
예제 1
블록 방향에서, 스크롤 내부 여백을 컨테이너에서 잠금 위치까지 20px로 설정합니다:
div {
scroll-padding-block: 20px;
}
예제 2: 이미지 라이브러리
scroll-padding-block 속성은 스크롤 잠금 행동을 가진 이미지 갤러리를 사용하여 이미지를 고정 요소 아래로 밀어 넣을 수 있습니다:
#container {
scroll-padding-block: 30px 0;
}
예제 3
컨테이너 요소의 writing-mode 속성 값을 vertical-rl로 설정하면, 블록 방향에서 컨테이너와 자식 요소의 시작 위치가 상단에서 우측으로 이동하고, 종료 위치가 하단에서 좌측으로 이동합니다. 이는 스크롤 잠금 행동 및 scroll-padding-block 속성의 작동 방식:
#container {
scroll-padding-block: 20px 0;
writing-mode: vertical-rl;
}
CSS 문법
scroll-padding-block: auto|value|initial|inherit;
속성 값
| 값 | 설명 |
|---|---|
| auto | 기본 값. 브라우저가 내부 여백을 계산합니다. |
| length |
px, pt, cm 등의 단위로 scroll-padding-block를 지정합니다. 부정적 값을 사용할 수 없습니다. 참조:CSS 단위。 |
| % | 내부 여백을 지정하여 포함 요소 너비의 백분율을 지정합니다. |
| initial | 이 속성을 기본 값으로 설정합니다. 참조: initial。 |
| inherit | 부모 요소에서 이 속성을 상속합니다. 참조: inherit。 |
기술 세부 사항
| 기본 값: | auto |
|---|---|
| 상속성: | 아니요 |
| 애니메이션 제작: | 지원하지 않습니다. 참조:애니메이션 관련 속성。 |
| 버전: | CSS3 |
| JavaScript 문법: | object.style.scrollPaddingBlock="20px" |
브라우저 지원
표格에 표시된 숫자는 이 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.
| 크롬 | 에지 | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 69.0 | 79.0 | 68.0 | 15.0 | 56.0 |
관련 페이지
- 이전 페이지 scroll-padding
- 다음 페이지 scroll-padding-block-end
