(* 아래로, 위로 스크롤하면서 확인해보십시오..)

스티키 헤더

div 1

div 2

div 3

div 4

div 5

div 6

div 7

div 8

div 9

        
            
        
    
        
            /* 스크롤 패딩과 마진 */
            .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을 사용하면 스티키 요소를 위한 공간을 마련해줄 수 있다 - 이 패딩이 없다면; 스크롤 스냅이 발생할 때 고정된 스티키 요소가 일부 컨텐츠와 겹치게 된다!