如何让滚动条永远在最底部

  • 一、适用场景
  • 二、实现思路
  • 三、效果图
    • 四、在线演示
    • 五、完整代码

一、适用场景

在某些场景下，你可能希望滚动条保持在最底部，以确保用户始终看到最新的内容或信息。如：在实时聊天应用程序中，当新消息到达时，滚动条自动滚动到最底部，方便用户立即看到最新的对话。

二、实现思路

  1. 使用 nextTick 等待 DOM 更新完成，然后计算出内部容器的总高度 max（如：当前可视区只有第4、5、6项，前面的3项已经由于滚动的关系不可见了。我们需要获取的总高度是包含 1~6 项的总高，而不仅是可视的高度）；
  2. 当出现滚动条时，因为滚动条到容器顶部的距离，一定恒小于在第一步计算出来的内部容器的总高度 max。
  3. 所以，每当新增一项或者删除一项时，我设置滚动条到顶部的距离为第一步计算出来的内部容器的总高度 max，就可以让滚动条滚动到底部了。

三、效果图

四、在线演示

点击此处即可跳转到 Element Plus Playground

五、完整代码

下面使用的是vue3语法：

<template><div class="header"><el-button @click="add">新增一项</el-button><el-button @click="onDelete">删除一项</el-button><el-button @click="setScrollToTop">回到顶部</el-button></div><el-scrollbar ref="scrollbarRef" max-height="200px" always @scroll="handleScroll"><div ref="innerRef"><p v-for="item in count" :key="item" class="scrollbar-demo-item">{{ item }}</p></div></el-scrollbar></template>
import { nextTick, ref } from 'vue'const count = ref(5) // 计数器const scrollbarRef = ref() // 滚动条实例const innerRef = ref() // 计数器内部实例/** * 控制滚动条滚动到容器的底部 */async function setScrollToBottom() {// 注意：需要通过 nextTick 以等待 DOM 更新完成await nextTick()const max = innerRef.value!.clientHeightconsole.log('max', max) // 如：当 count = 5 时，max = 总项数 * 每一项的高度 + 外边距 * (总项数 - 1)，即 max = 5 * 50px + 20px * (5 - 1) = 330pxscrollbarRef.value!.setScrollTop(max) }/** * 控制滚动条滚动到容器的顶部 */function setScrollToTop() {scrollbarRef.value!.setScrollTop(0)}/** * 当触发滚动事件时，返回滚动的距离 */function handleScroll({ scrollTop }) {console.log('scrollTop', scrollTop)}/** * 新增一项 */async function add() {count.value++await setScrollToBottom()}/** * 删除一项 */async function onDelete() {if (count.value > 0) {count.value--}await setScrollToBottom()}
.header {margin: 10px;}.scrollbar-demo-item {display: flex;align-items: center;justify-content: center;height: 50px;margin: 20px;text-align: center;border-radius: 4px;background: var(--el-color-primary-light-9);color: var(--el-color-primary);}