CSS scroll-margin-block-start 속성

정의와 사용법

scroll-margin-block-start 이 속성은 블록 방향에서 부착 위치와 컨테이너 간의 거리를 지정합니다.

이는 당신이 스크롤을 멈추면, 스크롤이 빠르게 조정되어 블록 방향에서 자식 요소 시작 위치와 컨테이너 간의 지정된 거리에 정지하는 것을 의미합니다.

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

정의.

吸附位置은 당신이 스크롤을 멈추면, 자식 요소가 컨테이너 안에吸附된 위치를 의미합니다.주의: scroll-snap-align 이 속성은 블록 방향에만 적용됩니다.

속성이 'start'으로 설정되었을 때만 작동합니다. scroll-margin-block-start 속성의 효과를 보려면 scroll-margin-block-start 와 scroll-snap-align 속성을 설정하고 scroll-snap-type 속성과 일치합니다.

CSS의 scroll-margin-inline 와 scroll-margin-block 속성은 CSS 속성 CSS scroll-margin-top 속성와스크롤 마진 하단와scroll-margin-left 와 scroll-margin-right 매우 유사하지만 scroll-margin-block 와 scroll-margin-inline 속성은 블록 방향과 행간 방향에 따라 의존합니다.

예제

예제 1

블록 방향에서, 정렬 위치와 컨테이너 간의 스크롤 외경을 20px로 설정합니다:

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

직접 시도해 보세요

예제 2

when the <div> element's writing-mode 속성 값을 vertical-rl로 설정할 때, 블록 방향은 오른쪽에서 왼쪽으로 변경됩니다. 결과는 요소의 시작 부분이 상단에서 오른쪽으로 이동합니다:

div {
  scroll-margin-block-start: 50px;
  writing-mode: vertical-rl;
}

직접 시도해 보세요

CSS 문법

scroll-margin-block-start: 0|value|initial|inherit;

속성 값

값 설명
0 기본. 요소의 기본 scroll-margin 거리.
length

px, pt, cm 등의 단위로 지정된 거리를 지정합니다. 음수 값을 허용합니다.

참고:CSS 단위。
initial 이 속성을 기본 값으로 설정합니다. 참고: initial。
inherit 부모 요소에서 이 속성을 상속합니다. 참고: inherit。

기술 세부 사항

기본 값: 0
상속성: 아니요
애니메이션 제작: 지원하지 않습니다. 참고:애니메이션 관련 속성。
버전: CSS3
JavaScript 문법: object.style.scrollMarginBlockStart="20px"

브라우저 지원

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

크롬 에지 파이어폭스 사파리 오페라
69.0 79.0 68.0 14.1 56.0

관련 페이지

참조:CSS scroll-snap-align 속성

참조:CSS scroll-snap-type 속성

참조:CSS 쓰러짐 모드 속성