웹 브라우저는 기본적으로 스크롤 고정(scroll anchoring) 기능을 제공합니다. 이는 페이지 콘텐츠가 로딩되거나 변경될 때 사용자의 현재 스크롤 위치가 갑자기 튀지 않도록 조정하는 기능입니다. 하지만 경우에 따라 이 동작이 오히려 불편함을 줄 수 있는데, 이때 CSS의 overflow-anchor 속성을 사용하여 기본 스크롤 고정 동작을 비활성화할 수 있습니다.
overflow-anchor 속성이란?
overflow-anchor 속성은 특정 요소를 스크롤 고정 앵커 후보에서 제외하거나 포함시키는 데 사용됩니다. 주요 값은 다음과 같습니다.
- auto — 기본값. 브라우저가 자동으로 앵커 요소를 선택하여 스크롤 위치를 보정합니다.
- none — 해당 요소와 그 하위 요소에 대해 스크롤 고정 기능을 비활성화합니다.
예제
다음 예제는 body 요소에 overflow-anchor: none을 적용하여 스크롤 고정을 비활성화하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
overflow-anchor: none;
}
div {
display: flex;
flex-direction: row;
}
</style>
</head>
<body>
<div>
<img src="https://images.unsplash.com/photo-1613061588991-6dd130548bc7?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=160" />
<img src="https://images.unsplash.com/photo-1612129717112-9d1274034547?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=160" />
<img src="https://images.unsplash.com/photo-1613079936591-8ce270890241?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=160" />
<img src="https://images.unsplash.com/photo-1612454902143-328050834c9e?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=160" />
</div>
<h2>Test overflow</h2>
</body>
</html>실행 결과
위 코드를 실행하면 이미지들이 가로 방향으로 나열되고, 이미지가 로드되면서 콘텐츠 높이가 변하더라도 스크롤 위치가 자동으로 보정되지 않습니다. 즉, overflow-anchor: none 덕분에 브라우저의 기본 스크롤 고정 동작이 비활성화되어 화면이 의도치 않게 움직이지 않습니다.
참고 사항
overflow-anchor 속성은 Chrome 56+, Firefox 66+, Edge 등 대부분의 모던 브라우저에서 지원되지만, Safari는 아직 지원하지 않으므로 크로스 브라우징 시 유의해야 합니다. 또한 무한 스크롤 목록처럼 콘텐츠가 위쪽에 계속 삽입되는 UI에서는 스크롤 고정을 활성화 상태(auto)로 두는 것이 사용자 경험에 더 좋을 수 있습니다.