CSS scroll-padding-bottom 속성

정의와 사용법

scroll-padding-bottom 속성이 컨테이너 하단에서 자식 요소의吸附位置까지의 거리를 지정합니다.

吸附位置은 당신이 스크롤을 멈추면, 자식 요소가 컨테이너 내에吸附到位된 위치를 의미합니다. 吸附位置은 다음으로 설정됩니다. scroll-snap-align 속성 설정, 하지만 CSS 속성에도 영향을 받을 수 있습니다. direction 및 writing-mode 의 영향.

주의:이 속성은 자식 요소의 하단에 부착 위치가 설정되었을 때만 유효합니다。

를 설정해야 합니다 scroll-padding-bottom 속성의 효과를 볼 수 있는 경우, 자식 요소에 scroll-snap-align 속성을 부모 요소에 설정하고, 자식 요소에 scroll-padding-bottom 및 scroll-snap-type 속성。

예제

예제 1

컨테이너 하단에서 부착 위치까지의 스크롤 패딩을 20px로 설정합니다：

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

직접 테스트해 보세요

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

부착 행동을 가진 이미지 갤러리에서는, scroll-padding-bottom 속성이 이미지를 고정 요소 위로 밀어 올립니다：

#container {
  scroll-padding-bottom: 30px;
}

직접 테스트해 보세요

예제 3: 하단 스크롤 패딩 설정

두 방향에서 부착 행동을 설정할 때는, 컨테이너에도 부착 행동을 설정할 수 있습니다。 scroll-padding-bottom 속성. 다음 요소로 가垂直로 스크롤하여 효과를 확인하세요：

#container {
  scroll-padding-bottom: 30px;
}

직접 테스트해 보세요

예제 4: 부착 위치

다음과 같이 하려면， scroll-padding-bottom 속성이 적용되고, 부착 위치는 자식 요소의 하단에 설정되어야 합니다. 이 예제에서는，writing-mode 속성이 자식 요소의 하단에서부터 좌측으로 위치를 부착합니다. 이와 같은 코드를 사용할 때는，scroll-padding-bottom 속성이 더 이상 작동하지 않습니다：

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

직접 테스트해 보세요

CSS 문법

scroll-padding-bottom: auto|value|initial|inherit;

속성 값

기술 세부 사항

浏览器支持

표中的数字表示首个完全支持该属性的浏览器版本。

관련 페이지

참조:CSS 방향 속성

참조:CSS scroll-snap-align 속성

참조:CSS scroll-snap-type 속성

참조:CSS 워팅모드 속성