자바스크립트에서 뒤로가기 감지하기

상품 리스트에서 상세 상품을 본 후 뒤로 가기 시 원래 스크롤 위치를 기억했다가 보여주고 싶었다.

 

1. scroll 이벤트가 발생 시 해당 scrollTop의 값을 session에 저장

여기서 scroll이 발생 시마다 session에 값이 저장되는 것은 낭비이다. throttle를 이용해 마지막 이벤트가 발생하고 일정 시간(400ms)이 지나기 전까지 다시 호출되지 않도록 막아줬다.

document.addEventListener('scroll', () => {	
	if (!timer) {	
		timer = setTimeout(() => {	
			timer = null;	
			const scrollValue = document.documentElement.scrollTop;	
			sessionStorage.setItem("main_page_info", JSON.stringify(scrollValue) );	
			}, 400);	
	}	
});

 

그리고 아래 소소로, 페이지가 보일 때마다 전의 스크롤 위치를 session에서 가져와 보여주도록 했다.

setTimeout(() => {	
	window.scrollTo({ left: 0, top: sessionStorage.getItem("main_page_info")});	
}, 200);

 

하지만 페이지가 보여질때마다 전의 스크롤 위치를 보여주니 

상품 리스트에서 상세 상품을 본 후 뒤로 가기한 경우가 아니라 아예 다른 탭을 갔다가 와도 마지막으로 session에 저장된 위치로 보였다.

 

이를 해결하기 위해 조건문을 넣어 뒤로 가기인 경우에만 session에서 값을 가져와 scroll을 이동할 수 있도록 해줬다.

window.onpageshow = function(event) {
	if ( event.persisted || (window.performance && window.performance.navigation.type == 2)) {
		setTimeout(() => {	
        	window.scrollTo({ left: 0, top: sessionStorage.getItem("main_page_info")});	
		}, 200);
	}
}

 

 

이건 뒤로 가기를 감지할 수 있는 소스이다

 window.onpageshow = function(event) {
 	if ( event.persisted || (window.performance && window.performance.navigation.type == 2)) {
		console.log("뒤로가기가 맞습니다.");
	}else{
		console.log("뒤로가기가 아닙니다.");
	}
}

뒤로가기를 감지하는 소스의 출처는

https://kingofbackend.tistory.com/178

[JavaScript] 무한 스크롤 시 상품 위치 유지