Vue设置滚动条自动保持到最底端

需求描述:在开发中我们常常会遇到需要让滚动条保持到最底端的需求,比如在开发一个聊天框时,请求接口拿到消息列表数据,展示到前端页面时,需要让滚动条自动滚到最底端,以此来展示最后的聊天记录。同时,当发送一条新的消息时,也需要滚动条自动滚动到最底端,默认显示到最后一条数据,而不是在发送完一条新消息之后还需要手动滑动滚动条到最底端。

主要实现原理:

其实这个需求就是需要设置该元素(产生滚动条的元素)的scrollTop 等于scrollHeight

主要代码:

html 复制代码
<template>
	<div ref="box" class="box"></div>
</template>
html 复制代码
<script>
	// 滚动到底部
	scrollToBottom() {
	  // 这里是Vue2的写法
	  const box = this.$refs.box as HTMLElement
	  this.$nextTick(() => {
	    box.scrollTop = box.scrollHeight
	  })
	}
</script>
html 复制代码
<style>
.box {
	overflow: auto;
	height: 446px;  /*重要!一定要有高度才会生成滚动条*/
 }
 </style>

注意事项:

box容器必须设置具体的高度height,否则不会产生滚动条,(如果页面上看有滚动条,那可能是父元素产生的滚动条),如果没有给box容器设置高度的话,这个scrollToBottom方法就不会生效!

如果本篇博客对你有帮助,请点个赞吧o( ̄▽ ̄)d

相关推荐
向下的大树21 小时前
npm 最新镜像,命令导致下载错误
前端·npm·node.js
宁雨桥21 小时前
Service Worker:前端离线化与性能优化的核心技术
前端·性能优化
IT_陈寒21 小时前
SpringBoot实战:这5个隐藏技巧让我开发效率提升200%,90%的人都不知道!
前端·人工智能·后端
ObjectX前端实验室1 天前
【图形编辑器架构】节点树与渲染树的双向绑定原理
前端·计算机图形学·图形学
excel1 天前
Vue2 与 Vue3 生命周期详解与对比
前端
一只猪皮怪51 天前
React 18 前端最佳实践技术栈清单(2025版)
前端·react.js·前端框架
Misnice1 天前
React渲染超大的字符串
前端·javascript·react.js
天天向上的鹿茸1 天前
用矩阵实现元素绕不定点旋转
前端·线性代数·矩阵
李鸿耀1 天前
主题换肤指南:设计到开发的完整实践
前端
带娃的IT创业者1 天前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript