무한스크롤시 상세페이지 진입시 스크롤 유지

여러곳에서 구글링하면서 코드를 보는거보다 로직을보고 코드를 짜는게 편할거같아서 쭉 보니

큰 로직은

1. 스크롤시 html에 append하기전 태그 코드를 세션스토리지에 담고

2. 상세 페이지 이동시 스크롤 높이를 다른 세션스토리지에 담고

3. 상세페이지에서 스크롤 페이지로 돌아갔을때 세션스토리지에 조회하고 조회한 세션스토리지가 있으면 불러와서 html에 추가하는 것이다

 

여기에서 좀 더 추가된 부분이 스크롤 페이지에 검색조건이 있는 경우이다 당연히 다른 검색식으로 페이지를 조회했을때는 다른 리스트를 보여주기 때문에 이전에 담았던 세션스토리지를 비워야한다

 

그렇다면 로직을 다시 수정해서

1. 스크롤시 코드와 스크롤 페이지네이션 정보를 담고  +스크롤시 담았던 데이터의 구분 정보인 현재 url을 담는다

2. 상세 페이지 이동시 스크롤 높이를 담고

3. 상세페이지에서 스크롤 페이지로 돌아갔을때 현재URL과 담았던URL을 비교한다

4. 같으면 스토리지 데이터를 append하고 스크롤시 불러올 url을 수정한다 아니면 스토리지를 전체 비운다

5. 추가되면 스크롤 위치를 내린다

 

 

1.

function 스크롤시불러올함수(result) {

 

     var htmlTag = "";

     htmlTag += '더보기시 추가할 태그정보';

    addListSessionStorage('저장할리스트이름', '더보기url이름', htmlTag, result['다음에불러올리스트url']);

    $('#추가할리스트').append(htmlTag);

    $('#더보기').attr("data-url", result['다음에불러올리스트url']);

 

}

function addListSessionStorage(Listname, urlName, htmlTag, UrlData) {

    if (sessionStorage.getItem(Listname)) {

        let listData = sessionStorage.getItem(Listname);

        listDataHtmlTag = listData + htmlTag;

        sessionStorage.setItem(Listname, listDataHtmlTag);

        sessionStorage.setItem(urlName, UrlData);

    } else {

        sessionStorage.setItem(Listname, htmlTag);

        sessionStorage.setItem(urlName, UrlData);

    }

}

 

checkNowPageSessionStorage(); // 위치: 스크롤 페이지

 

function checkNowPageSessionStorage() {

    if (sessionStorage.getItem("nowUrl")) {

        if (sessionStorage.getItem("nowUrl") == window.location.href) {

        } else {

            sessionStorage.clear();

            sessionStorage.setItem("nowUrl", window.location.href);

        }

    } else {

        sessionStorage.setItem("nowUrl", window.location.href);

    }

}

2. 

// 위치: 스크롤 페이지    

    $('body').on('click', '.startStorage', function(e) {

                            let docHeight = document.documentElement.scrollTop;

                            sessionStorage.setItem("높이", docHeight);

                        });

 

3. 

checkNowPageSessionStorage(); // 비교도하고 현재페이지를 담는다 위치: 스크롤 페이지

4.

getScrollpaginationSessionStorage('높이', '저장할리스트이름', '더보기url이름', '추가할리스트'); // 위치 : 스크롤 페이지

 

function getScrollpaginationSessionStorage(heightName, ListName, UrlName, appendName) {

    if (sessionStorage.getItem(UrlName)) {

        let listData = sessionStorage.getItem(ListName);

        let docHeight = sessionStorage.getItem(heightName);

        $('#' + appendName).append(listData);

        let nextUrl = sessionStorage.getItem(UrlName);

        $('#더보기').attr("data-url", nextUrl);

        window.scrollTo(0, docHeight);

    } else {

        // sessionStorage.clear();

        window.scrollTo(0,0);

    }

}

++ sessionStorage.clear(); 를 통해 세션 스토리지를 관리하고자했는데 이곳저곳에서 세션 스토리지를 날려대다보니 세션스토리지끼리 꼬이는 현상을 경험했다. 해당 코드는 관리하기 쉽게 특정 한곳에서만 초기화를 시켜주는것이 좋았다