루트 스크롤러

모바일 앱에서 일부 스크롤러에 절대적 스크롤러(= 풀-투-리프레시) 동작이 있는데, 이는 Root Scroller에서 발생한다. 한 페이지에는 루트 스크롤러가 단 하나만 존재하며, 기본적으로 documentElement는 페이지의 루트 스크롤러이지만, 이 루트 스크롤러를 변경하면; 특정 동작이 documentElement 이외의 스크롤러에도 적용될 수 있다('암시적 루트 스크롤러'). 이 암시적 루트 스크롤러를 만들려면; 컨테이너를 고정으로 배치하여 전체 표시 영역을 덮고, 스크롤러와 함께 z-index가 가장 높은지 확인하는 스크롤러 승격을 사용하면 된다:

            
                const rootElement= document.documentElement
                const firstTier= rootElement.childNodes
                // firstTier는 루트 요소의 직계 자식의 NodeList(head, body 등)이다
                
                for (const child of firstTier) {
                  // 루트 요소의 각 직계 자식으로 작업한다..
                }
            
        

            
                html {
                    display: block;
                }
                
                body {
                    display: grid; place-content: center;
                    min-block-size: 150vh;
                    background: lightblue;
                }
                
                .nested-scroller {
                    overflow-y: auto;
                    overscroll-behavior: contain;
                    background: white;
                    padding: 10px;
                    z-index: 10000;
                }