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

需要注意的点有：

需要对scollbar设置高度，如果没有设置，但是下面的div设置了高度，会导致滚动条还是原生滚动条，因为这个找了很久。
必须要放在nextTick函数里面，不然由于Vue的异步更新机制，可能导致执行代码的时候DOM还没有更新，即scrollContentRef.value!.clientHeight还是原来的值。

编辑

上次更新: 2024/11/17, 13:04:13

mac使用docker部署nextcloud-aio并为本地域名添加https支持（未成功）→