Android Chrome 더보기 관련 스크롤 위치 이슈

안드로이드 크롬에서 더보기 버튼으로 비동기로 데이터 추가 시 더보기 버튼을 누르면 스크롤 위치가 페이지 하단으로 이동되어 새로 추가된 아이템 목록 끝으로 보이는 스크롤 위치 이슈가 있었습니다.

 

또 다른 예로, sticky된 가로 스크롤 메뉴 -> 다른 메뉴 클릭 -> 아이템 리셋 후 비동기로 새로운 데이터 추가 시 이전에 보고 있던 스크롤 위치가 그대로 유지되어 처음 아이템 부터 보이지 않는 이슈 입니다.

 

Chrome 56 부터 scroll anchoring 기능을 추가했으며, 이는 뷰포트에서 스크롤 위치를 고정시키고 뷰포트 외부의 콘텐츠가 계속 로드 되더라도 사용자가 동일한 위치를 볼 수 있도록 도와줍니다.

 

웹의 다양한 상황으로 인하여 scroll anchoring이 오작동 하는 경우가 발생할 수 있으며, 이를 위해 overflow-anchor를 통하여 선택적으로 scroll anchoring을 제어 할 수 있습니다.

body {
  overflow-anchor: none;
}