x

Modal Scroll

Css 오버스크롤 동작 모듈은 스크롤 위치가 스크롤 경계에 도달할 때(이 경계를 넘는 오버스크롤 시) 스크롤 컨테이너의 동작을 제어한다. 이 측면을 제어하는 ​​것은 특히 내장된 스크롤 가능영역이 부모 컨테이너의 스크롤을 트리거하지 않아야 하는 시나리오에서 유용하다

요소의 내용이 컨테이너보다 크고, 스크롤이 가능하거나 기본적으로 스크롤되는 상황에서(예컨대, 블로그 게시판에서 [게시글] 입력 시) 요소의 스크롤 가능영역을 지나 계속해서 스크롤하면 부모요소에서 스크롤이 시작되는 경우가 있다. 반대로, 웹사이트의 이용약관에서 보듯이, [확인란]을 활성화하기 위해 약관 설명 바깥까지 도달하더라도 페이지가 스크롤되거나 바운스되지 않도록 할 수도 있다

예컨대, Modal 박스의 맨 아래 가장자리에 도달한 다음 계속 스크롤하면; 상위 스크롤 컨테이너가 움직이는 스크롤 체인이 발생하게 된다(웹브라우저의 기본 동작에 따라, 스크롤은 상위 컨테이너가 인계받는다!). 이때, 모달 박스에서 overscroll-behavior: contain; 속성값을 주면 오버플로우 스크롤이 상위 컨테이너로 유출되는 것(= 스크롤 체인)을 방지할 수 있다:

                    
                        .wrapper {
                            height: 150vh;
                        }
                        
                        :root {
                            --var-overscroll-behavior: 'contain';
                        }
                        
                        .modal, .modal-content {
                            overscroll-behavior: var(--var-overscroll-behavior);
                        }
                    
                

                    
                        let root= document.documentElement;
                        let overscroll= document.getElementById("switcher")
                        
                        root.style.setProperty('--var-overscroll-behavior', 'contain')
                        overscroll.addEventListener("change", function (e) {
                            root.style.setProperty('--var-overscroll-behavior', e.target.value)
                        });
                    
                

☞ 이 모달 컨텐츠 박스 스크롤 이후, 박스 내부 맨 아래쪽에서 더 스크롤해보고, 뒤 부모요소가 스크롤되는지 확인해보십시오..

* 위 값 변경 메뉴상자에서 overscroll-behavior: 속성값을 auto로 값을 바꾸어준 뒤, 여기다 마우스 포인터를 놓고 계속 스크롤해보십시오..