设置元素的scrollTop不生效的解决办法

这里以vue项目为例,先看结构,使用ref获取元素;

<template>
    <div class="dialogBody" ref="dialogBody">
        <!-- 话语框 -->
    </div>
</template>

1.元素必须包含的样式属性

.dialogBody{
    overflow-x: hidden;
    overflow-y: auto;
}

2.要确保这个元素的确有滚动条

3.设置滚动距离(如果只是滚动到最底部,不需要那么精确设置滚动多少)

this.$nextTick(()=>{
    this.$refs.dialogBody.scrollTop = this.$refs.dialogBody.scrollHeight
})