vue set scrollbar position

List

Listen to the scroll event in the list, save the value to the component data each time, and set the scroll bar to the last recorded position again when the component is activated

This component must use keep-alive cache, otherwise only state management plugins such as vuex can be used to save page location information

<template>

    <div style="height: 200px;border: 2px solid #333;overflow-x: hidden;box-sizing: border-box;" @scroll="scroll">
        <h1>
            List
        </h1>
        <div v-for="i in arr" :key="i" style="height: 200px"> {{i}}</div>

    </div>
</template>

<script>
    export default {
        name: "list",
        data() {
            return {
                arr: [1, 2, 3, 4, 5],
                pos: 0
            }
        },
        methods: {
            scroll(event) {
                this.pos = event.target.scrollTop
                console.log('scroll', event.target.scrollTop)
            }
        },
        activated() {
            this.$el.scrollTop = this.pos
        },
        beforeRouteEnter: (to, from, next) => {
            // 在渲染该组件的对应路由被 confirm 前调用
            // 不！能！获取组件实例 `this`
            // 因为当守卫执行前，组件实例还没被创建
            // console.log('before enter', this)
            // let topy = document.body.scrollTop
            //
            // console.log(topy)
            next()
        },
        beforeRouteLeave(to, from, next) {
            // 导航离开该组件的对应路由时调用
            // 可以访问组件实例 `this`
            console.log('route leave')

            // let topy = document.body.scrollTop
            let topy = window.scrollTop
            console.log(topy, this.$el)
            next()

        },
    }
</script>

<style scoped>

</style>

After the scroll bar moves, access other components again, and then return, the component scroll bar position remains unchanged

 

You can also use routing events to assign assignments only when the route is removed and activated, which is slightly more efficient than scroll. Note that when the beforeRouteEnter method is executed, this has not been created and cannot be used, so you can only set the scroll bar position when it is activated.

  activated() {
            this.$el.scrollTop = this.pos
        },
        beforeRouteEnter: (to, from, next) => {
            // 在渲染该组件的对应路由被 confirm 前调用
            // 不！能！获取组件实例 `this`
            // 因为当守卫执行前，组件实例还没被创建
            // console.log('before enter', this)
            // let topy = document.body.scrollTop
            //
            // console.log(topy)
            next()
        },
        beforeRouteLeave(to, from, next) {
            // 导航离开该组件的对应路由时调用
            // 可以访问组件实例 `this`
            console.log('route leave')

            // let topy = document.body.scrollTop
            this.pos = this.$el.scrollTop
            console.log(' this.pos ',  this.pos )
            next()

        },

 

http://www.jb51.net/article/118592.htm