需求描述:在开发中我们常常会遇到需要让滚动条保持到最底端的需求,比如在开发一个聊天框时,请求接口拿到消息列表数据,展示到前端页面时,需要让滚动条自动滚到最底端,以此来展示最后的聊天记录。同时,当发送一条新的消息时,也需要滚动条自动滚动到最底端,默认显示到最后一条数据,而不是在发送完一条新消息之后还需要手动滑动滚动条到最底端。
主要实现原理:
其实这个需求就是需要设置该元素(产生滚动条的元素)的scrollTop
等于scrollHeight
主要代码:
<template>
<div ref="box" class="box"></div>
</template>
<script>
// 滚动到底部
scrollToBottom() {
// 这里是Vue2的写法
const box = this.$refs.box as HTMLElement
this.$nextTick(() => {
box.scrollTop = box.scrollHeight
})
}
</script>
<style>
.box {
overflow: auto;
height: 446px; /*重要!一定要有高度才会生成滚动条*/
}
</style>
注意事项:
box容器必须设置具体的高度height
,否则不会产生滚动条,(如果页面上看有滚动条,那可能是父元素产生的滚动条),如果没有给box容器设置高度的话,这个scrollToBottom
方法就不会生效!
如果本篇博客对你有帮助,请点个赞吧o( ̄▽ ̄)d