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

 

무한 스크롤 기능을 구현하는데 있어 반드시 병행되어야 할 기능이 있습니다. 바로 무한 스크롤로 렌더링된 상품을 누르고 다시 [뒤로가기]를 했을 시 여전히 그 상품의 위치로 와야 한다는 것입니다.

 

[JavaScript] 무한 스크롤 기능 구현하기

 

만약, 이 기능이 구현되어 있지 않으면 상품을 누르고 맘에 들지 않아 [뒤로가기]를 눌렀을 때 다시 이 상품이 나왔던 곳까지 스크롤을 내려야 합니다.

 

오늘의 집, 아이디어스은 어떻게 되어있는 지 한번 보겠습니다.

 

[오늘의 집]

오늘의 집 같은 경우 sessionStorage를 이용한 걸 알 수 있습니다.

오늘의 집

 

뒤로 가기 이벤트가 발생했을 경우 이를 감지하여 sessionStorage에서 값을 뿌려주는 것 같았습니다. 그래서 만약 저 값들을 지우게 된다면 상품을 보고 [뒤로가기]를 눌렀을 때 전에 위치로 돌아오지 못합니다.

 

[아이디어스]

아이디어스 같은 경우는 우선 현재 무한 스크롤의 위치를 localStorage에 저장합니다. 하지만 상품을 눌렀을 경우 새로운 페이지가 생겨나서 사실 [뒤로가기]의 의미가 없어집니다.

아이디어스

 

아무튼 LocalStorage와 SessionStorage를 이용하면 어렵지 않게 [무한 스크롤 시 상품 위치 유지](제가 이름 붙인거라 보편적인 이름은 아닙니다..) 기능을 구현할 수 있을 것 같습니다.

---

오늘의 집과 유사하게 기능을 구현해보겠습니다. 무한 스크롤 기능은 구현되어있다 가정하겠습니다.

1. 무한 스크롤을 이용해서 새로 상품을 불러 올때마다 해당 위치와 불러온 상품들을 SessionStorage에 담습니다.
2. 상품을 클릭합니다. 이때 SessionStorage에는 이전 페이지에 대한 정보가 있습니다.
3. 뒤로가기를 눌러 이전 페이지로 이동하면 전에 보았던 상품의 위치로 이동되어 있습니다.

 

* 참고 : SessionStorage에 관한 function입니다.

 

[STEP1] 무한 스크롤을 이용해서 새로 상품을 불러 올때마다 해당 위치와 불러온 상품들을 SessionStorage에 담는다

// s : sessionStorage 값 설정
session_obj.totalReturnData = totalReturnData;
session_obj.path_name = path_name;
session_obj.sort = formData.sort; 
setJSONSessionStorage('session_obj', session_obj);//세션 스토리지에 저장
// e : sessionStorage 값 설정

* 참고 : totalReturnData에는 html이 담겨져 있습니다.

 

스크롤을 내릴시 특정 위치에 스크롤이 가게되면 ajax를 통해 상품들을 추가적으로 불러옵니다. 이후 ajax success 부분에 위 코드를 추가하여 SessionStorage에 담아줍니다. 

 

[STEP2] 상품을 클릭한다

상품 디테일 이전 페이지

 

상품 클릭 후 상품 디테일 페이지로 이동 후 SessionStorage보면 값들이 잘 담겨져 있습니다.

 

[STEP3] 뒤로가기를 눌러 이전 페이지로 이동하면 전에 보았던 상품의 위치로 이동되어 있다

상품 디테일

 

상품 디테일 화면에서 뒤로가기를 눌러 이전 페이지로 이동합니다.

상품 디테일 이전 페이지

 

상품 위치로 잘 온것을 확인 할 수 있습니다.

---

[최종코드]

[뒤로가기]를 했을 시 돌아오는 페이지에서 "[뒤로가기]를 해서 이 페이지로 왔다" 라는 이벤트를 감지해야 합니다. 

window.onpageshow = function(event) {
	if ( event.persisted || (window.performance && window.performance.navigation.type == 2)) {
	// Back Forward Cache로 브라우저가 로딩될 경우 혹은 브라우저 뒤로가기 했을 경우
		console.log("뒤로가기로 왔음");
	}else{
    	console.log("뒤로가기로 온게 아님");
    }
}

위 코드를 이용하여 [뒤로가기]의 이벤트를 감지 할 수 있습니다. 사실 여기까지만 되면 더 이상 어려울 건 없습니다.

 

[무한 스크롤 시 상품 위치 유지] 기능에 대한 최종 코드입니다.

function onPageShow(_callback){
	// 뒤로가기 이벤트 감지
	window.onpageshow = function(event) {
		if ( event.persisted || (window.performance && window.performance.navigation.type == 2)) {
		// Back Forward Cache로 브라우저가 로딩될 경우 혹은 브라우저 뒤로가기 했을 경우
			_callback();
		}/*else{
		}*/
	}
}

function initReturnData(){
	if(getJSONSessionStorage("session_obj") != null 
       && getJSONSessionStorage("session_obj").path_name == path_name){
		...				
		totalReturnData += getJSONSessionStorage("session_obj").totalReturnData;
		page_now = getJSONSessionStorage("session_obj").page_now;
		...
	}
}

$(function() {
	
	onPageShow(function(){
		initReturnData();
	});

}

 

onPageShow 로 [뒤로가기] 이벤트를 감지한 후 콜백함수(initReturnData)를 호출하여 SessionStorage에 있는 값들을 렌더링 시켜줍니다.

 

이상 오늘의 집에서 영감을 얻어 [무한 스크롤 시 상품 위치 유지] 기능을 구현해봤습니다.