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