웹페이지를 방문하여 콘텐츠를 읽기 시작했는데 광고나 이미지가 로드되어 페이지가 갑자기 튀어나와서 페이지에서 위치를 잃어버린 적이 있나요?
Chrome 51에서 Scroll Anchoring 플래그를 확인해 보세요.
스크롤 고정은 페이지에서 현재 위치를 추적하고 리플로우를 일으키는 요소가 페이지에서의 위치를 방해하지 못하도록 합니다.
이 기능을 직접 사용해 보려면 다음 단계를 따르세요.
- Chrome 개발자/Canary에서 chrome://flags/#enable-scroll-anchoring으로 이동합니다.
- 드롭다운에서 '사용 설정됨'을 선택합니다.
- 화면 하단에서 '지금 다시 실행'을 클릭합니다.
이렇게 하면 스크롤 고정이 사용 설정됩니다.
Google에서는 이 기능을 한동안 사용해 왔으며, 이 기능이 웹에서 모든 사용자의 환경을 크게 개선한다고 생각하지만 모든 곳에서 잘 작동하는지 확인하고자 합니다. 스크롤 고정이 페이지의 리플로를 처리하지 못한 예나 스크롤 고정이 개입해서는 안 되는 예를 발견한 경우 Google에 알려주시기 바랍니다.
g.co / reportbadreflow 양식을 작성하여 예기치 않은 동작이 발생한 경우 의견/예시를 보내주세요.
FAQ
이 변경사항이 JavaScript 스크롤에 어떤 영향을 미치나요?
간단히 말해, 그렇지 않습니다.
이 변경사항은 리플로로 인한 스크롤 효과를 변경합니다. 예를 들어 요소의 높이가 증가하도록 하는 클래스 이름을 요소에 추가하면 리플로가 발생하고 스크롤 고정은 페이지가 갑자기 움직이지 않도록 합니다.
window.scrollTo(0, 1)를 호출하면 (예, 기존 해킹) 리플로가 발생하지 않으며 정상적으로 작동합니다. 터치 이벤트도 마찬가지입니다.
스크롤 고정이 페이지에 영향을 미치는 예시를 발견하면 g.co/reportbadreflow 양식을 통해 의견을 보내주세요.