Vue3实现滚动条自动滚动到底部
更新时间：2025年08月30日 14:16:19 作者：水果摊见
在Vue中,通过ref和watch结合nextTick实现滚动区域自动滚动到底部,并添加返回顶部按钮,适用于动态内容场景,供开发者参考
需求
在一个区域会依次打印log，随着log的加长，出现滚动条，而滚动条应该始终保持在最下方。
点击回到顶部按钮，可以使滚动条回到最上方
方案
- 在滚动区域添加ref
- log为一个数组，对其添加watch
- 在watch函数中，使用nextTick，通过ref控制该区域滚动高度
- 绑定ref，监测其height，使回到顶部按钮出现，并通过ref控制滚动条回到顶部
代码
// template
<div class="bottom-logs" ref="logRef">
// antd vue中的back-top组件
<a-back-top :target="() => logRef" :visibilityHeight="10" @click="handleBackToTop" />
<LogData :logData="log"></LogData>
</div>
// css
// 父级元素 display: flex
.bottom-logs {
flex: 1;
overflow: auto;
}
<script setup>
import { ref, watch, nextTick } from 'vue'
const logRef = ref();
// log为响应式数组
watch(log, () => {
nextTick(() => {
const content = logRef.value;
content.scrollTo({ top: content.scrollHeight, behavior: "smooth" });
});
}, {
deep: true,
});
const handleBackToTop = () => {
const content = logRef.value;
content.scrollTo({ top: 0, behavior: "smooth" });
}
</script>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue3使用exceljs将excel文件转化为html预览最佳方案
在企业应用中,我们时常会遇到需要上传并展示 Excel 文件的需求,以实现文件内容的在线预览,经过一番探索与尝试,笔者最终借助 exceljs 这一库成功实现了该功能,本文将以 Vue 3 为例,演示如何实现该功能,需要的朋友可以参考下2025-05-05
这篇文章主要介绍了如何在 ant 的table中实现图片的渲染操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了vue Cli 环境删除与重装教程 - 版本文档，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
Vue开发模式是一种基于Vue.js框架的开发方式,它可以帮助开发者更高效地构建和维护复杂的Web应用程序,下面这篇文章主要给大家介绍了关于vue关闭开发模式提示的简单解决办法,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了Vue Router中Matcher的初始化流程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue vue-Router默认hash模式修改为history需要做的修改详解
今天小编就为大家分享一篇vue vue-Router默认hash模式修改为history需要做的修改详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
element-ui中select组件绑定值改变,触发change事件方法
今天小编就为大家分享一篇element-ui中select组件绑定值改变,触发change事件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了Vue中的按键监听和鼠标监听的常见实现方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2025-07-07
这篇文章主要介绍了vue中watch监听器的触发时机(watch的坑及解决)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Axios 是 Javascript 中最受欢迎的 HTTP 库之一，我们可以用它在 Vue 程序中调用API。在本文中我们用 Vue 3 和 Axios 写一个侃爷语录小应用，可以用这个小程序学习英语，同时也能从侃爷的话中得到一些启发，而且还可以学习用 Vue 异步请求API，一举多得，何乐而不为呢？2021-05-05
最新评论