VueJs 不更新 ScrollTop [英] VueJs doesnot update ScrollTop

问题描述

我创建了一个聊天框，希望在加载和发送新消息时滚动到底部.

由于某种原因以下不起作用

安装(){this.$nextTick(this.$refs.scrollList.scrollTop = this.$refs.scrollList.scrollHeight)},

我也尝试使用以下方法，在 messages div 的底部添加了一个 div，id 为 bottom.

<div id="bottom"></div>安装(){this.$nextTick(document.getElementById('bottom').scrollIntoView(false))},

这并不奏效.

当我在控制台中打印数据时，我可以看到 scrollTop = 0 和 scrollHeight = 515 但没有更新滚动.

谢谢

解决方案

其中一个应该可行:

//1安装(){this.$nextTick(() => {setTimeout(() => {this.$refs.scrollList.scrollTop = this.$refs.scrollList.scrollHeight}, 100)})}//2安装(){this.$nextTick(() => {setTimeout(() => {this.$refs.scrollList.scrollTop = 99999}, 100)})}

编辑

甚至不确定 setTimeout() 是否有用.我认为主要问题是 .nextTick() 需要一个函数作为参数，而您没有给出函数:

来自:https://vuejs.org/v2/api/#Vue-nextTick

//修改数据vm.msg = '你好'//DOM 还没有更新Vue.nextTick(function () {//DOM 更新})

Hi I have created a chat box and wants to scroll to bottom when loaded and when new message is sent.

For some reason following is not working

<div class="d-flex flex-column" id="messages" ref="scrollList">
</div>

mounted() {
    this.$nextTick(this.$refs.scrollList.scrollTop = this.$refs.scrollList.scrollHeight)
},

I have tried using following as well, added a div with id of bottom at the bottom of messages div.

<div id="bottom"></div>

mounted() {
    this.$nextTick(document.getElementById('bottom').scrollIntoView(false))
},

This did not work as well.

When I print the data in console, I can see that scrollTop = 0 and scrollHeight = 515 but not updating the scroll.

Thank you

解决方案

One of these should work:

// 1
mounted() {
    this.$nextTick(() => {
        setTimeout(() => {
            this.$refs.scrollList.scrollTop = this.$refs.scrollList.scrollHeight
        }, 100)
    })

}

// 2
mounted() {
    this.$nextTick(() => {
        setTimeout(() => {
            this.$refs.scrollList.scrollTop = 99999
        }, 100)
    })

}

EDIT

Not even sure if setTimeout() is useful. I think the main problem is that .nextTick() expects a function as an argument and you are not giving a function:

from : https://vuejs.org/v2/api/#Vue-nextTick

// modify data
vm.msg = 'Hello'
// DOM not updated yet
Vue.nextTick(function () {
  // DOM updated
})

这篇关于VueJs 不更新 ScrollTop的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！