【Element-plus】如何让滚动条永远在最底部（支持在线演示）

一、适用场景

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

二、实现思路

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>
1
2
3
4
5
6
7
8
9
10
11
12

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!.clientHeight
  console.log('max', max) // 如：当 count = 5 时，max = 总项数 * 每一项的高度 + 外边距 * (总项数 - 1)，即 max = 5 * 50px + 20px * (5 - 1) = 330px
  scrollbarRef.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()
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

.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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14