(* 아래로, 위로 스크롤하면서 확인해보십시오..)
/* 스크롤 패딩과 마진 */
.scroll_container { /* 스크롤 컨테이너 */
height: 400px;
overflow-y: scroll;
scroll-snap-type: y mandatory;
scroll-padding: 30px; /* 스크롤 컨테이너에서, 스크롤 패딩 설정 */
}
.scroll_container div { /* 스크롤 컨텐츠 요소들 */
scroll-snap-align: start;
scroll-margin: 10px; /* 각 스크롤 컨텐츠에서, 스크롤 마진 설정 */
}
.positioned-sticky { /* 상단 스키티 요소 */
position: sticky; top: 0px;
}
☞
상단에 스티키와 같은 고정된 요소가 배치되어 있는 경우 스크롤된 컨텐츠와 겹칠 수 있는데,
이런 때 scroll-padding을 사용하면 스티키 요소를 위한 공간을 마련해줄 수 있다
- 이 패딩이 없다면; 스크롤 스냅이 발생할 때 고정된 스티키 요소가 일부 컨텐츠와 겹치게 된다!