vue.js 스크롤 복구(기존 위치로 스크롤 이동) 관련하여 질문이 있습니다.

Question

안녕하세요현재 vue를 이용해서 운영하는 서비스에서 스크롤과 관련된 질문을 드립니다.프로젝트 구조는 회사 선임님께서 잡아주셨는데-- 화면 이동과 관련된 js import dayjs from 'dayjs' dayjs.locale(&#34;ko&#34;); export default { data() { return { }; }, methods: { toTop(object) { object.scrollIntoView({ behavior: 'smooth', block: 'start' }); }, movePageWithPath(ruoterName, params){ // 내부 페이지 이동 : PathUrl - 라우터 기반 arguments[0] : 라우터이름, arguments[1] : 파라메터 - {key:value} 형식 this.$router.push({ name: ruoterName, params: params }); }, movePagePath(path){ this.$router.push(path); } } -- router 관련 js import {createRouter, createWebHistory} from 'vue-router' import store from '&#64;/store'; const routes &#61; [ { path: '/page', name: 'pageList', component: () &#61;> import('../views/vue/pageList.vue'), props: true }, { path: '/detail', name: 'pageDetail', component: () &#61;> import('../views/vue/pageDetail.vue'), props: true } ] const router &#61; createRouter({ history: createWebHistory(process.env.BASE_URL), routes, scrollBehavior(to, from, savedPosition) { const position &#61; store.state.scrollPositions ? store.state.scrollPositions[to.name] : null; if (savedPosition) { return savedPosition; } else if (position) { return position; } else { return { left: 0, top: 0 }; } } }) let previousName &#61; ''; router.beforeEach((to, from, next) &#61;> { console.log(&#34;resetData >>>>> to &#61;&#61;> &#34; &#43; to &#43; &#34; from &#61;&#61;> &#34; &#43; from); // 스크롤 위치 저장 로직 추가 if (from.name) { const position &#61; { left: window.pageXOffset, top: window.pageYOffset }; store.commit('saveScrollPosition', { route: from.name, position: position }); } previousName &#61; from.name; next(); }); export const getPreviousName &#61; () &#61;> previousName; export default router -- sotre 부분 js import { createStore } from 'vuex' import persistedstate from 'vuex-persistedstate'; import SecureLS from &#34;secure-ls&#34;; const ls &#61; new SecureLS({ encodingType: &#34;aes&#34;, isCompression: true, encryptionSecret: process.env.VUE_APP_STR_PWD }); const store &#61; createStore({ state() { return {scrollPositions: {} } }, mutations: { saveScrollPosition(state, { route, position }) { // undefined일 경우 객체 초기화 if (!state.scrollPositions) { state.scrollPositions &#61; {}; } state.scrollPositions[route] &#61; position; } } }) export default store;대략 이런 느낌입니다제가 ChatGPT에 물어보면서 추가된 부분도 있긴한데pageList에서 아래방향으로 스크롤하고 리스트항목을 눌러서 Detail로 이동하고 다시 List로 이동했을 때그 위치로 스크롤이 이동했으면 합니다이것저것 다 해봤는데 어느 부분에서 스크롤의 위치를 잡아서 넘겨줘야할지 감이 안잡히네요..

신도림산당 · Answer

리스트 페이지에서 상세 페이지 이동 을 클릭할때(Trigger) 스크롤 위치를 저장하고 상세에서 리스트 페이지로 다시 넘어올경우 리스트 페이지가 DOM에 그리기 전에 store에 저장된 스크롤 위치를 불러온후 셋팅해서 그려주면 되는거 아닐까요?

풍월상신(가니메디안) · Answer

JS 의, history.scrollRestoration = "auto";를 줘도 되는데... 모든 이벤트마다 줄 수는 없으니까 뭔가 근본적인 해결책이 필요하겠죠.react 의 RRD 에는 ScrollRestoration 이라는 컴포넌트가 있습니다.찾아보시면 vue 의 라우팅 라이브러리에도 비슷한 게 있지 않을까 생각합니다.

vue.js 스크롤 복구(기존 위치로 스크롤 이동) 관련하여 질문이 있습니다.

2개의 답변

Q&A 목록