CSS scroll-margin-block-end 속성

정의와 사용법

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

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

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

을 정의합니다.

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

속성 값을 'end'로 설정할 때만 작동합니다. scroll-margin-block-end 속성의 효과를 보려면, 자식 요소에 설정해야 합니다 scroll-margin-block-end 와 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

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

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

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

예제 2

when the <div> 요소의 writing-mode 속성 값을 vertical-rl로 설정할 때, 블록 방향은 오른쪽에서 왼쪽으로입니다. 결과는 요소의 끝이 하단에서 왼쪽으로 이동합니다:

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

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

CSS 문법

scroll-margin-block-end: 0|value|기본값|thừa kế;

속성 값

기술 세부 사항

브라우저 지원

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

관련 페이지

참조:CSS scroll-snap-align 속성

참조:CSS scroll-snap-type 속성

참조:CSS 쓰기 모드 속성