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

相关推荐
Code小翊5 分钟前
C语言bsearch的使用
java·c语言·前端
云枫晖5 分钟前
Webapck系列-初识Webpack
前端·javascript
慧一居士8 分钟前
HTML5 功能介绍,使用场景,对应功能点完整使用示例
前端
海在掘金6112716 分钟前
告别“undefined is not a function”:TS如何让你的函数调用更安心
前端
云中雾丽19 分钟前
Flutter中Stream的各种使用场景和实现方式
前端
CptW22 分钟前
第1篇(Ref):搞定 Vue3 Reactivity 响应式源码
前端·面试
葡萄城技术团队26 分钟前
基于 SpreadJS 的百万级数据在线数据透视表解决方案:技术解析与实践
前端
爱隐身的官人37 分钟前
XSS平台xssplatform搭建
前端·xss
jiangzhihao051543 分钟前
升级到webpack5
前端·javascript·vue.js
橘子海全栈攻城狮1 小时前
【源码+文档+调试讲解】基于SpringBoot + Vue的知识产权管理系统 041
java·vue.js·人工智能·spring boot·后端·安全·spring