CSS scroll-margin-bottom 속성

정의와 사용법

scroll-margin-bottom 속성은吸附位置과 컨테이너 간의 거리를 지정합니다.

吸附位置是指子元素在停止滚动时吸附到容器中的位置。

吸附位置通过 scroll-snap-align 吸附位置은 자식 요소가 스크롤을 멈추면 컨테이너 안에 부착되는 위치를 의미합니다. 속성을 통해 설정된 시작 위치가 속성의 효과를 설정하려면, writing-mode 속성 설정, 그러나 CSS 속성

영향을 미칩니다.주의:

이 속성은 자식 요소의 하단에 시작 위치가 설정된 경우에만 유효합니다. scroll-margin-bottom 속성을 설정해야 합니다. scroll-margin-bottom 속성의 효과를 설정하려면, scroll-snap-align 속성을 부모 요소에 설정하고, scroll-snap-type 속성.

예제

예제 1

吸附 위치와 컨테이너 간의 스크롤 하단 외 경계를 20px로 설정합니다:

div {
  scroll-margin-bottom: 20px;
}

직접 시도해 보세요

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

scroll-margin-bottom 속성은 시작 위치가 자식 요소의 하단에 설정된 이미지 갤러리에 사용될 수 있습니다. 이 예제에서는,scroll-margin-bottom 사용자가 하단에 추가 이미지가 있는지 알려줍니다. 첫 번째 이미지를 스크롤하여 효과를 확인하세요:

#container > img {
  scroll-margin-bottom: 30px;
}

직접 시도해 보세요

예제 3: 시작 위치

사용하고 싶습니다 scroll-margin-bottom 속성이 유효하며, 시작 위치는 자식 요소의 하단에 설정되어야 합니다. 이 예제에서는,writing-mode 속성이 자식 요소의 하단에서 시작 위치를 좌측으로 변경합니다. 이러한 코드를 사용할 때,scroll-margin-bottom 속성이 더 이상 유효하지 않습니다:

#container {
  writing-mode: vertical-rl;
}
#container > div {
  scroll-margin-bottom: 30px;
  scroll-snap-align: end none;
}

직접 시도해 보세요

CSS 문법

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

속성 값

기술 세부 사항

브라우저 지원

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

관련 페이지

참조:CSS 방향 속성

참조:CSS scroll-snap-align 속성

참조:CSS scroll-snap-type 속성

참조:CSS 쓰기 모드 속성