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>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
利用vue组件自定义v-model实现一个Tab组件方法示例
这篇文章主要给大家介绍了关于利用vue组件自定义v-model实现一个Tab组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-12-12
这篇文章主要介绍了vue中el-checkbox全选、反选、多选的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
vue3父子通信ref,toRef,toRefs使用实例详解
这篇文章主要介绍了vue3父子通信ref,toRef,toRefs使用实例详解,分别介绍了ref是什么、toRef是什么及toRefs是什么和最佳使用方式,结合示例代码给大家讲解的非常详细,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了webstorm添加*.vue文件支持，webstorm很多的插件内置，不用安装插件，下面尝试用vue和es6做项目，有兴趣的可以了解一下2018-05-05
这篇文章主要介绍了vue中data和data()的区别说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
使用Vue3和Plotly.js打造一个3D图在线展示的实现步骤
三维网格图广泛应用于科学可视化、医学成像、工程设计等领域,用于展示复杂的数据结构和空间分布,本文给大家介绍了使用Vue3和Plotly.js打造一个3D图在线展示的实现步骤,文中有详细的代码示例供大家参考,需要的朋友可以参考下2024-07-07
在本篇文章里小编给大家整理的是一篇关于vue中插槽整理及用法分析内容，对此有兴趣的朋友们可以跟着学习下。2021-12-12
为了方便大家写代码，Vue 给大家提供了很多方便的修饰符，比如我们经常用到的取消冒泡，阻止默认事件等等，这篇文章将给大家分享Vue 中的常用的修饰符2022-08-08
这篇文章主要介绍了Vue+Vant 图片上传加显示的案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了前端渐进式框架VUE的相关资料，文中讲解的非常细致，帮助大家开始学习VUE，感兴趣的朋友可以了解下2020-07-07
最新评论