<div id="readability-page-1" class="page"><div><p>CSS의 <code>overscroll-behavior</code> 속성을 아시나요? 모달 팝업이나 햄버거 메뉴가 오버레이 됐을 때 스크롤을 하다 보면 결국 그 아래의 본문이 스크롤이 되는 현상을 방지하는 CSS 프로퍼티입니다.</p><p>아래는 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior">MDN</a>에서 가져온 예제인데요. 안쪽 스크롤을 해도 바깥쪽이 스크롤되지 않습니다. 햄버거 메뉴도 이와 같이 제어할 수 있습니다.</p>
<div>
<div><p>
This is a scrollable container. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln’s Inn
Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the
face of the earth.
</p><p>
Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged.
</p><p>
This is a scrollable container. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln’s Inn
Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the
face of the earth.
</p><p>
Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged.
</p></div>
<div id="example-element"><p>
This is the inner container. Focus on this container, scroll to the bottom and when you reach the bottom keep
scrolling.
</p><p>
If you have <code>overscroll-behavior: auto;</code> selected the outer container will
start to scroll.
</p><p>
If you have <code>overscroll-behavior: contain;</code> selected, the outer container will
not scroll unless you move your cursor out of the inner container and try to perform scroll on the outer
container.
</p></div>
</div><p>아래처럼 속성값을 <code>contain</code>으로 설정하면 위 동작이 나옵니다. <code>auto</code>가 기본값으로 안쪽의 스크롤이 끝나면 바깥쪽이 스크롤되는 것이고요. <code>none</code>은 화면 끝에서 튕기는 효과가 없습니다. 그러니까 요는 <code>conatin</code> 쓰시면 됩니다.</p><pre><code>overscroll-behavior: contain;</code></pre><p>안쪽 박스에 스크롤이 없는 경우라면 그냥 바깥쪽이 스크롤됩니다. 즉, 스크롤 락은 아닙니다. 안쪽에 스크롤바가 있을 때 유효한 도구입니다.</p></div><div id="about"><figure><img width="300" height="300" src="https://mytory.net/wp-content/uploads/2024/05/profile-300x300-1.webp" alt=""></figure></div></div>

웹으로 말하기

CSS의 overscroll-behavior 속성을 아시나요? 모달 팝업이나 햄버거 메뉴가 오버레이 됐을 때 스크롤을 하다 보면 결국 그 아래의 본문이 스크롤이 되는 현상을 방지하는 CSS 프로퍼티입니다. 아래는 MDN에서 가져온 예제인데요. 안쪽 스크롤을 해도 바깥쪽이 스크롤되지 않습니다. 햄버거 메뉴도 이와 같이 제어할 수 있습니다. This is a scrollable container. Michaelmas term lately over, and the Lord Chancellor sitting […]

overscroll-behavior 모달 스크롤이 바깥까지 스크롤시키지 못하게 막기

댓글