History API를 사용하여 URL을 관리하는 것은 훌륭한 웹 앱의 중요한 기능입니다. 그러나 단점 중 하나는 스크롤 위치가 저장되고 기록을 탐색할 때마다 복원된다는 점입니다. 이는 스크롤 위치가 자동으로 변경될 때, 특히 앱에서 전환을 수행하거나 어떤 식으로든 페이지의 콘텐츠를 변경하는 경우 보기 좋지 않은 점프를 의미할 때가 많습니다. 결국 이는 끔찍한 사용자 경험으로 이어집니다.
더 심각한 문제는 할 수 있는 작업이 거의 없습니다. Chrome은 scroll 이벤트 전에 popState 이벤트를 트리거합니다. 즉, popState에서 현재 스크롤 위치를 읽은 다음 window.scrollTo를 사용하여 scroll 이벤트 핸들러에서 되돌릴 수 있습니다 (Ewww이지만 작동하더라도 작동함). 그러나 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에 대한 지원을 원하는지 알려주세요.