IOS safari 에서 history back 시, 스크롤 유지

기존 소스상 beforeunload 이벤트를 이용해 web에서 이전 화면으로 이동 시, 스크롤 유지를 시키고 있었다. 

 

그런데 왠걸 IOS web(safari)에선 스크롤 유지가 되지 않고, history back 시 계속 페이지가 리로딩되며 이전에 보고있던 스크롤 위치를 유지하지 못하고 스크롤이 최상단으로 올라가는 현상이 발생. 

 

검색해보니 beforeunload 이벤트 자체를 IOS safari에선 지원해주지 않는 것이였다.

 

아래 MDN에서도 아예 IOS safari는 지원이 되지 않는다고 명시되어 있다.

참고URL: developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

Window: beforeunload event - Web APIs | MDN

기존 AOS 의 경우 페이지를 벗어나려고 할 때, beforeunload 이벤트에서 스크롤 위치값을 sessionStorage에 저장시켰다가, 로딩 콜백함수에서 sessionStorage에 담은 값을 되찾아 스크롤을 위치시켜 왔다.

 

IOS safari에서도 동일한 기능 적용을 위해 여러 검색과 시도 결과 

'pagehide'라는 이벤트가 정상 작동하는 것을 알게되었다.

window.addEventListener('pagehide', function(e){
	sessionStorage.setItem('historyScrollTop' , document.documentElement.scrollTop);
});

document.documentElement.scrollTop //  현재 스크롤 위치를 가져오며 모든 브라우저에서 지원.