Example of using store in vue3 to record scroll position

Overall Effect

When you scroll through the homepage list and enter the details page, you can return to the previously browsed location when you switch back to the homepage.

Listen for container scroll events

Define a scroll event and bind it to the container's scroll event. I've done some throttling here.

const savePosY = () => {
      if(state.timer) return;
      state.timer = setTimeout(() => {
        let node = document.querySelector(".contentWrapper");
        //Record scroll positionstore.commit("setY",node.scrollTop)
        state.timer = null;
        clearTimeout(state.timer);
      },100)

Get the container in mounted to bind the event

onMounted(() => {
    let contentWrapper = document.querySelector(".contentWrapper");
    contentWrapper.addEventListener("scroll",savePosY);
})

Configuration in the store

The store is relatively simple, containing only one state: y and mutations: setY

export default {
    state:{
         y:0
    },
    mutations:
        setY(state,value){
            state.y = value;
        }
    }
}

Get the scroll position when the page jumps back

Also operate in onMounted, otherwise the container element cannot be obtained, and because DOM in Vue is rendered asynchronously, we need to operate in nextTick to be effective

nextTick(() => { contentWrapper.scrollTop = store.state.y; })

at last

The above is the full content of this article. If there is something wrong or a better method, you are welcome to communicate and point it out.

The above is the details of the example of how vue3 uses store to record the scroll position. For more information about vue to record the scroll position, please pay attention to other related articles on 123WORDPRESS.COM!