[CSS] 스크롤 앵커링에 대해 알아보자

스크롤 앵커링에 대해 알아보자 

 

[ 스크롤 앵커링 / overflow-anchor ]

스크롤 앵커링이란 데스크톱 혹은 모바일 기기를 통해 웹 페이지를 볼 때, 이미지 로딩 등으로 화면이 갑자기 다른 곳으로 스크롤링되어 버리는 현상을 해소하기 위해 도입된 기능이다.

 

데스크톱이나 모바일 기기를 이용해서 인터넷 뉴스나 블로그 같은 웹 페이지들을 보다 보면, 갑자기 웹 페이지의 다른 곳으로 화면이 스크롤되어 버리는 현상이 나타나고는? 했다. ( 이제는 그러지 않는다. 적어도 크롬에서는!!! ) 이는 웹 페이지를 로딩하는 방식에서 용량이 작은 텍스트를 먼저 로딩하고, 고해상도의 이미지나 비디오 같은 오브젝트들을 나중에 로딩해서 발생하는 문제이다.

 

사용자가 웹 페이지를 스크롤 다운로드 하면서 보고 있을 때, 이미 스크롤 다운이 된 웹 페이지의 상단 내용은 의미가 없다. 고해상도의 이미지가 로딩되었다고 해도, 결과적으로는 다시 스크롤 다운로드 해야 하는 불편함이 생기기 때문이다. 

간혹 악의적으로 텍스트 사이에 콘텐츠를 밀어 넣어서 광고를 클릭하게 만드는 어뷰징도 발생한다. 

 

 

아래의 영상은 스크롤 앵커링 기능의 유무를 비교한 영상이다. 좌측은 스크롤 앵커링 기능이 없는 버전이고, 우측은 스크롤 앵커링 기능이 있는 버전이다. 

 

 

스크롤 앵커링이 있으면, 웹 페이지에 콘텐츠가 나중에 로딩되어도 사용자가 보고 있던 페이지에 뷰가 고정된다. 

반면, 스크롤 앵커링이 없으면, 페이지를 보는 도중 콘텐츠 로딩이 완료되면 페이지의 상단으로 스크롤이 옮겨가는 현상이 나타난다. 

 

만약 스크롤 앵커링의 기능을 비활성화 하고 싶으면 overflow-anchor: none 를 사용하면 된다. 

 

 

---

 

 

[ 앵커링 사용 ]

스크롤 앵커링은 레이아웃이 변경되어도 문서를 보고 있는 클라이언트의 시야를 안정적으로 유지시켜 준다. 

아래 예시를 통해 앵커링 기능이 UX를 얼마나 향상시키는지 확인해 보자.

 

각 영역을 스크롤하면 1초 후 상단에 초록색 박스가 생기는데, overflow-anchor 속성이 있으면 방해되지 않도록 스크롤이 조절된다. 

 

 

See the Pen Untitled by zenghyun (@zenghyun) on CodePen.

 

https://css-tricks.com/almanac/properties/o/overflow-anchor/

 

 

이 기능은 돔 노드를 선택해 ‘앵커 노드(Anchor Node)’라고 하고, 앵커 노드의 위치를 추적하며 그에 따른 스크롤 옵셋을 조정한다. 앵커 노드를 주시하고 있다가 새로운 요소의 등장(돔 추가, display 처리 등)으로 위치가 바뀌면 알아서 스크롤을 앵커 노드에 맞춰주는 것이다. 

 

그렇다면 이 멋진 기능을 어떻게 쓰면 될까? 

 

아무것도 안 해도 된다!!!!!!!!

 

이 기능을 지원하는 브라우저라면 기본적으로 스크롤 앵커링이 활성화 상태이다.
기본적으로 활성화 상태지만 필요 없을 때 해제 처리할 수 있는, 이른바 옵트 아웃 속성이다.

 

이 속성은 한 번 해제하면 하위 요소에서 다시 설정하는 것은 안된다.
즉, document에서 overflow-anchor: none으로 옵트 아웃하면 문서 내 어떤 요소에서도 overflow-anchor: auto로 옵트 인 할 수 없습니다. (참고: MDN)

 

 

REF: https://nykim.work/89