History API를 사용하여 URL을 관리하는 것은 멋지고 훌륭한 웹 앱의 핵심 기능입니다. 하지만 이 기능의 한 가지 단점은 스크롤 위치가 저장된 후 기록을 순회할 때마다 복원된다는 점입니다. 스크롤 위치가 자동으로 변경될 때, 특히 앱이 어떤 식으로든 전환하거나 페이지의 콘텐츠를 변경할 때 보기 좋게 건너뛰는 경우가 많습니다. 이는 결국 끔찍한 사용자 경험으로 이어집니다.
문제를 더욱 악화시킬 수 있습니다. Chrome에서 scroll 이벤트 전에 popState 이벤트를 트리거합니다. 즉, popState의 현재 스크롤 위치를 읽은 다음 window.scrollTo를 사용하여 scroll 이벤트 핸들러에서 이를 반전할 수 있습니다 (예: 예, 작동하기는 쉽음). 그러나 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 지원을 바라는지 알려주세요.