History API를 사용하여 URL을 관리하는 것은 훌륭한 기능이며 우수한 웹 앱의 핵심 기능입니다. 그러나 한 가지 단점은 스크롤 위치가 저장된 후 탐색 기록을 탐색할 때마다 더 중요한 것은 복원된다는 것입니다. 이는 스크롤 위치가 자동으로 변경될 때 보기에 좋지 않은 점프가 발생하는 것을 의미하며, 특히 앱이 전환되거나 어떤 식으로든 페이지의 콘텐츠가 변경되는 경우 더욱 그렇습니다. 궁극적으로 이는 끔찍한 사용자 환경을 초래합니다.
더 나쁜 것은 이 문제를 해결할 방법이 거의 없다는 것입니다. Chrome은 scroll 이벤트 전에 popState 이벤트를 트리거합니다. 즉, popState에서 현재 스크롤 위치를 읽은 다음 scroll 이벤트 핸들러에서 window.scrollTo를 사용하여 이를 역전시킬 수 있습니다 (으으, 하지만 적어도 작동은 함). 그러나 Firefox는 popState 전에 scroll 이벤트를 트리거하므로 이전 스크롤 값을 복원할 수 없습니다. 흥!
하지만 해결 방법이 있습니다. history.scrollRestoration 두 가지 문자열 값을 사용합니다. 하나는 모든 항목을 현재 상태로 유지하는 auto (기본값)이고, 다른 하나는 사용자가 앱의 기록을 탐색할 때 필요할 수 있는 모든 스크롤 변경사항의 소유권을 개발자가 갖는다는 의미의 manual입니다. 필요한 경우 history.pushState()로 기록 항목을 푸시할 때 스크롤 위치를 추적할 수 있습니다.
이 기능은 매우 멋지지만 새롭고 실험적 기능이므로 사용하기 전에 사용 가능한지 확인하세요.
if ('scrollRestoration' in history) {
// Back off, browser, I got this...
history.scrollRestoration = 'manual';
}
Chrome 46 이상에서 history.scrollRestoration를 찾을 수 있으며 여기에서 사양을 확인할 수 있습니다.
의견을 남겨주시고 다른 공급업체에서도 scrollRestoration를 지원하기를 원하는 경우 알려주세요.