需要使用 addEventListener 的方法获取滑动条的位置
xxx.vue 页面是一直缓存的，所以使用路由进入钩子（onActivated）设置滑动条的位置
App.vue:文章来源：https://www.toymoban.com/news/detail-705164.html
...
<el-container>
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
...
xxx.vue文章来源地址https://www.toymoban.com/news/detail-705164.html
<script setup lang="ts">
import { ref, onMounted, onUnmounted, onActivated } from 'vue'
const elm = ref(null)
let container_elm: any
let scroll_top: any
onActivated(() => {
if (container_elm) {
container_elm.scrollTop = scroll_top
}
})
onMounted(() => {
if (elm.value) {
container_elm = ((elm.value) as any).$el
}
if (container_elm) {
container_elm.addEventListener('scroll', () => {
scroll_top = container_elm.scrollTop
});
}
}
</script>
<template>
<el-container>
<el-aside width="200px">
table
</el-aside>
<el-main ref="elm">
<div id="main" style="width:600px; height:400px;"></div>
<div id="main2" style="width:600px; height:400px;"></div>
</el-main>
</el-container>
</template>
到了这里，关于vue elementui 组合式 api 对于容器的滑动条的位置的获取与设置。切换页面可以保持原来的容器里的滑动条位置不变的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
