무한 스크롤 기능을 구현하는데 있어 반드시 병행되어야 할 기능이 있습니다. 바로 무한 스크롤로 렌더링된 상품을 누르고 다시 [뒤로가기]를 했을 시 여전히 그 상품의 위치로 와야 한다는 것입니다.
[JavaScript] 무한 스크롤 기능 구현하기
무한 스크롤은 이커머스 관련된 웹이나 앱을 사용하면 쉽게 접할 수 있는 기능입니다. 스크롤의 위치가 어떠한 조건을 충족하게 되면 추가적으로 상품들을 불러옵니다. 그럼 어떻게 구현하는지
kingofbackend.tistory.com
만약, 이 기능이 구현되어 있지 않으면 상품을 누르고 맘에 들지 않아 [뒤로가기]를 눌렀을 때 다시 이 상품이 나왔던 곳까지 스크롤을 내려야 합니다.
오늘의 집, 아이디어스은 어떻게 되어있는 지 한번 보겠습니다.
[오늘의 집]
오늘의 집 같은 경우 sessionStorage를 이용한 걸 알 수 있습니다.
뒤로 가기 이벤트가 발생했을 경우 이를 감지하여 sessionStorage에서 값을 뿌려주는 것 같았습니다. 그래서 만약 저 값들을 지우게 된다면 상품을 보고 [뒤로가기]를 눌렀을 때 전에 위치로 돌아오지 못합니다.
[아이디어스]
아이디어스 같은 경우는 우선 현재 무한 스크롤의 위치를 localStorage에 저장합니다. 하지만 상품을 눌렀을 경우 새로운 페이지가 생겨나서 사실 [뒤로가기]의 의미가 없어집니다.
아무튼 LocalStorage와 SessionStorage를 이용하면 어렵지 않게 [무한 스크롤 시 상품 위치 유지](제가 이름 붙인거라 보편적인 이름은 아닙니다..) 기능을 구현할 수 있을 것 같습니다.
오늘의 집과 유사하게 기능을 구현해보겠습니다. 무한 스크롤 기능은 구현되어있다 가정하겠습니다.
- 무한 스크롤을 이용해서 새로 상품을 불러 올때마다 해당 위치와 불러온 상품들을 SessionStorage에 담습니다.
- 상품을 클릭합니다. 이때 SessionStorage에는 이전 페이지에 대한 정보가 있습니다.
- 뒤로가기를 눌러 이전 페이지로 이동하면 전에 보았던 상품의 위치로 이동되어 있습니다.
* 참고 : 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에 있는 값들을 렌더링 시켜줍니다.
이상 오늘의 집에서 영감을 얻어 [무한 스크롤 시 상품 위치 유지] 기능을 구현해봤습니다.