vue 设置滚动条位置

原文链接: vue 设置滚动条位置

上一篇: vue 常见坑

下一篇: html 滚动条 位置

List

在list中监听scroll事件，每次保存该值到组件数据中，在组件被激活时，再次设置滚动条到上次记录的位置

该组件必须使用keep-alive缓存，否则只能使用vuex等状态管理插件保存页面位置信息

<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>

滚动条移动后，再次访问其他组件，然后返回来时，组件滚动条位置不变

也可以使用路由事件，只在路由移出和激活时进行赋值操作，比scroll会稍微效率高一点，注意beforeRouteEnter方法执行时，this尚未创建，不能使用，所以只能在激活时设置滚动条位置

  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