본문 바로가기

JS

[JS] Android Chrome 더보기 관련 스크롤이 하단으로 이동하는 경우

반응형

게시판을 하나 구성한다고 예시를 들어 봅시다.
게시글은 한번에 10개씩 불러 오고 추가적인 게시글은 하단에 더보기 버튼을 클릭하면
비동기식으로 가져와서 HTML 에 APPEND 되는 형식으로 구현을 했습니다.

이때 Android Chrome 의 경우, 비동기방식으로 APPEND가 되고 스크롤이 하단으로 이동하는 현상이 발생합니다.

Chrome 56 부터 scroll anchoring 기능이 추가되었고 이 기능은 화면(ViewPort)은 이벤트가 일어나는 위치에 고정 시키고 화면에서 보이지 않는 부분에서 계속 무엇인가 로드 되더라도 스크롤의 이동이 일어나지 않도록 도와줍니다.

경우에 따라 해당 기능이 정상적으로 동작하지 않는 경우가 있습니다. 이와 같은 경우 overflow-anchor를 이용해 scroll anchoring을 제어할 수 있습니다.

body{ overflow-anchor : none; }

반응형