CSS scroll-margin-block 속성

정의와 사용법

scroll-margin-block 속성은 블록 방향에서 고정된 위치(스나ップ 위치)와 컨테이너 간의 거리를 지정합니다.

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

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

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

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

• scroll-margin-block-start
• scroll-margin-block-end

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

scroll-margin-block 속성이 두 가지 값을 가질 때:

scroll-margin-block: 10px 50px;

• 시작 위치의 거리는 10px
• 시작 위치의 거리는 10px

scroll-margin-block 속성에 값이 하나인 경우

scroll-margin-block: 10px;

• 종료 위치의 거리는 50px

시작 위치와 종료 위치의 거리가 모두 10px인 경우 scroll-margin-block 속성의 효과를 볼 수 있도록 하려면 scroll-margin-block 과 scroll-snap-align 속성을 부모 요소에 설정하고 scroll-snap-type 속성과

CSS의 scroll-margin-inline 과 scroll-margin-block 속성은 CSS 속성 CSS scroll-margin-top 속성、scroll-margin-bottom、scroll-margin-left 과 scroll-margin-right 매우 유사하지만 scroll-margin-block 과 scroll-margin-inline 속성은 블록 방향과 행 내 방향에 따라 종속됩니다.

인스턴스

예제 1

블록 방향에서 어팅 위치와 스크롤 가능 컨테이너 간의 거리를 설정합니다:

div {
  scroll-margin-block: 10px;
}

본인이 직접 테스트해 보세요

예제 2

서브 요소의 writing-mode 속성 값을 vertical-rl로 설정하면, 요소가 블록 방향의 시작 위치가 상단에서 우측으로 이동하고, 종료 위치가 하단에서 좌측으로 이동합니다. 이는 스크롤 어팅 행동 및 scroll-margin-block 속성의 작동 방식:

div {
  scroll-margin-block: 20px 0;
  writing-mode: vertical-rl;
}

본인이 직접 테스트해 보세요

CSS 문법

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

속성 값

기술 세부 사항

브라우저 지원

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

관련 페이지

참조:CSS scroll-margin-block-end 속성

참조:CSS scroll-margin-block-start 속성

참조:CSS scroll-snap-align 속성

참조:CSS scroll-snap-type 속성

참조:CSS 쓰러잉-모드 속성