keep-alive记录滚动条位置

在做消息列表时需要记录keep-alive切换页面的滚动条位置。

mounted() {
        // 监听滚动条的位置
        this.$refs.scrollDom.addEventListener(
            'scroll',
            (res) => {
                const height = res.target
                this.tableScrollTop = height.scrollTop
            },
            false
        )
    },
    activated() {
        // 激活后重新设置滚动条
        this.activateScroll()
    },
    beforeDestroy() {
        // 移除监听滚动条事件
        this.$refs.scrollDom.removeEventListener(
            'scroll',
            (res) => {
                const height = res.target
                this.scrollTop = height.scrollTop
            },
            false
        )
    },
    methods: {
		// 激活后重新设置滚动条
        activateScroll() {
            this.$nextTick(() => {
                setTimeout(() => {
                    let scrollDom = this.$refs.scrollDom
                    scrollDom.scrollTop = this.tableScrollTop
                }, 13)
            })
        },
	},

直接拿过去用即可，scrollDom为你设置overflow-y: auto;的DOM。

温馨提示：初始化记得重置滚动高度噢。 this.tableScrollTop = 0; this.scrollTop = 0;