CSS의 overscroll-behavior 속성을 아시나요? 모달 팝업이나 햄버거 메뉴가 오버레이 됐을 때 스크롤을 하다 보면 결국 그 아래의 본문이 스크롤이 되는 현상을 방지하는 CSS 프로퍼티입니다.
아래는 MDN에서 가져온 예제인데요. 안쪽 스크롤을 해도 바깥쪽이 스크롤되지 않습니다. 햄버거 메뉴도 이와 같이 제어할 수 있습니다.
이것은 스크롤 가능한 컨테이너입니다. 마이클마스 임기가 끝난 후, 새로운 수상이 링컨 인 홀의 오래된 가죽 의자에 앉아 있습니다. 11월의 차갑고 습한 날씨가 도시를 감싸고 있습니다. 거리는 마치 대홍수 후 물이 빠진 듯한 진흙탕으로 뒤덮여 있고, 사람들은 조심스레 발걸음을 옮깁니다.
로렘 입섬은 16세기 어느 무명의 인쇄공이 활자를 무작위로 배열해 만든 견본 책에서 시작되어, 오랜 세월 동안 출판 및 그래픽 디자인 업계의 더미 텍스트로 사용되어 왔습니다. 놀랍게도 이 텍스트는 500년이 넘는 세월과 디지털 혁명을 거치면서도 그 본질을 잃지 않고 살아남았습니다.
도시의 하늘은 잿빛 구름으로 무겁게 내려앉아 있고, 간간이 비가 내립니다. 사무실 건물들의 창문에서 흘러나오는 불빛이 젖은 보도에 반사되어 도시에 독특한 분위기를 자아냅니다. 멀리서 들려오는 자동차 경적 소리와 발걸음 소리가 도시의 활기를 느끼게 합니다.
타이포그래피와 디자인의 세계에서 로렘 입섬은 단순한 채움재 이상의 의미를 지닙니다. 이는 창의성과 혁신의 상징이 되어, 디자이너들이 레이아웃과 시각적 계층구조를 실험할 수 있는 도구로 활용되고 있습니다. 시간이 흘러도 변치 않는 이 텍스트의 힘은 그 단순함과 적응성에 있습니다.
만약 overscroll-behavior: auto;로 설정하면 외부 컨테이너가 스크롤되기 시작할 것입니다.
overscroll-behavior: contain;을 설정한 상태로, 커서를 내부 컨테이너 밖으로 이동시키고 외부 컨테이너에서 스크롤을 시도하지 않는 한 외부 컨테이너는 스크롤되지 않을 것입니다.
아래처럼 속성값을 contain으로 설정하면 위 동작이 나옵니다. auto가 기본값으로 안쪽의 스크롤이 끝나면 바깥쪽이 스크롤되는 것이고요. none은 화면 끝에서 튕기는 효과가 없습니다. 그러니까 요는 conatin 쓰시면 됩니다.
overscroll-behavior: contain;안쪽 박스에 스크롤이 없는 경우라면 그냥 바깥쪽이 스크롤됩니다. 즉, 스크롤 락은 아닙니다. 안쪽에 스크롤바가 있을 때 유효한 도구입니다.
댓글 남기기