解决vue-router跳转后元素内嵌滚动条自动回到顶部的问题。

Posted 2021-09-13 吴掌柜

该路由已经使用了缓存的前提下

<keep-alive>
    <router-view></router-view>
</keep-alive>

当页面跳转，点击返回按钮后发现之前页面里的一个列表元素的滚动条自动回到顶部了，因为该元素设置了固定的宽高并且css设置overflow: scroll; 这样的话，滚动条不是页面级别的，并没有被记录下来，但是该组件又没有发生改变，所以封装个组件记录滚动条位置，页面发生改变就设置会以前的位置就行了。

自定义组件

<template>
<div 
    class="scroll_container"
    ref="ScrollElCp"
    :style="{
        height:height,
        width:width,
    }">
    <slot></slot>
</div>
</template>
<script>
//滚动容器组件（解决页面切换时不记录组件滚东条的情况）
export default {
    name: \'ScrollElCp\',
    props:{
        height:String,  //高度
        width:String,  //宽度
    },
    data() {
        return {
            scrollTop:0,
        }
    },
    watch:{
        $route(){
            const ScrollElCp = this.$refs.ScrollElCp;
            if(!ScrollElCp) return;
            ScrollElCp.scrollTop = this.scrollTop;
        },
    },
    mounted(){
        const ScrollElCp = this.$refs.ScrollElCp;
        ScrollElCp.addEventListener(\'scroll\',()=>{
            this.scrollTop = ScrollElCp.scrollTop;
        });
    },
}
</script>
<style scoped lang="scss">
.scroll_container {
    overflow: scroll;
}
</style>

使用方法

<template>
<div>
    <ScrollElCp
        height="100px"
        width="100px">
        <h1
            v-for="(item,index) in 100"
            :key="index">
            {{item}}
        </h1>
    </ScrollElCp>
</div>
</template>
<script>
import ScrollElCp from "@/components/public/ScrollEl";
export default {
    components: {
        ScrollElCp,
    },
}
</script>
<style scoped lang="scss">

</style>

这样只是组件本来就有缓存的情况，如果没有的话可以将该组件的滚动位置全局记录下来，不过这样很麻烦，需要的话请谷歌看看吧。

原文地址