vue3滚动条重置

lynachen

于 2024-04-16 14:30:42 发布

阅读量1.2k

点赞数 9

文章标签： vue.js javascript 前端

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/Julylyna/article/details/137823985

版权

本文讲述了在使用Vue开发的单页面应用中，如何处理路由切换时滚动条不自动重置的问题，通过`onBeforeRouteUpdate`设置定时器和`el-table`组件的`onUpdated`方法来实现滚动条的平滑重置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于单页面应用的原理，使用vue搭建的项目在路由切换时并不会刷新整个页面。因此在有滚动条的页面会存在滚动条不能自动重置的问题。在最近的项目中就遇到了这种问题，因此记录一下。

1.切换路由：

<el-main>

<router-view v-slot="{ Component }">
   <transition name="fade-slide" mode="out-in" appear>
       <component :is="Component" id="main" />
   </transition>
   </router-view>
</el-main>

onBeforeRouteUpdate((to, from) => {
   // 由于路由设置了0.3s过渡效果，所以此处设置了0.3s定时器。避免页面切换效果突兀。
   setTimeout(() => {
   document.getElementById("main").scrollIntoView({
       behavior: "smooth",
       block: "start",
   });
   }, 300);
})

2.el-table

<el-table ref="tableRef"></el-table>

onUpdated(() => {
   console.log(tableRef.value)
   if(tableRef.value != null) {
       tableRef.value.setScrollTop(0)
       tableRef.value.setScrollLeft(0)
   }
})