element-plus滚动条滚动到底部
<el-scrollbar ref="scrollContainerRef" height="50vh" class="message-box">
<div ref="scrollContentRef">
<div v-for="message in messages" :key="message.id" class="message">
</div>
</div>
</el-scrollbar>
<script lang="ts" setup>
const scrollContainerRef: any = ref(null);
const scrollContentRef:any = ref(null);
const addMsg = (messageObj: any, sendBySelf: boolean) => {
if (scrollContainerRef.value != null && scrollContentRef.value!=null) {
nextTick(() => {
scrollContainerRef.value!.setScrollTop(scrollContentRef.value!.clientHeight)
})
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
需要注意的点有：
- 需要对scollbar设置高度，如果没有设置，但是下面的div设置了高度，会导致滚动条还是原生滚动条，因为这个找了很久。
- 必须要放在nextTick函数里面，不然由于Vue的异步更新机制，可能导致执行代码的时候DOM还没有更新，即
scrollContentRef.value!.clientHeight还是原来的值。
编辑 (opens new window)
上次更新: 2025/04/15, 10:52:45