Vue方法将div滚动到顶部

The*_*apa 2 javascript vuejs2

我正在学习vue。我有以下方法,可以使用将聊天消息添加到div中id="toolbar-chat"。这个div允许在y轴上滚动,我希望每次添加新消息时div跳到顶部。为什么我的JS不起作用?

    document.getElementById("toolbar-chat").scrollTop = 0;
Run Code Online (Sandbox Code Playgroud)

我的vue方法:

    methods: {
        addMessage(message) {
            this.messages.unshift(message);

            document.getElementById("toolbar-chat").scrollTop = 0;

            axios.post(chat_send_route, message)
            .then(response => {
                console.log(response.data);
            });

        }
    }
Run Code Online (Sandbox Code Playgroud)

Ogn*_*rov 11

这是我的解决方案:

主容器中的一个全局 div

<div id="topDiv"></div>
Run Code Online (Sandbox Code Playgroud)

Vue 原型中的一个全局函数:

Vue.prototype.$scrollTop = function () {
  var element = document.getElementById("topDiv");
  var top = element.offsetTop;
  window.scrollTo(0, top);
}
Run Code Online (Sandbox Code Playgroud)

到处都是同一个锚:

<a @click="$scrollTop">Go to the top</a>
Run Code Online (Sandbox Code Playgroud)


Vam*_*hna 7

这是由于vue异步更新dom而导致的。请参阅深度反应性(异步更新队列)

  • 要立即反映更改,请使用 vm.$nextTick(callback)

  • 建议不要向dom元素查询属性,而是向元素document.getElementById()添加ref属性,toolbar-chat然后在的方法中引用它this.$refs。有关属性的更多信息,请参阅文档ref

     <div id="toolbar-chat" ref="toolbarChat"></div>
    
    Run Code Online (Sandbox Code Playgroud)

所以你的方法应该是

methods: {
    addMessage(message) {
        this.messages.unshift(message);
        this.$nextTick(() => {
            this.$refs.toolbarChat.scrollTop = 0;
        });

        axios.post(chat_send_route, message)
        .then(response => {
            console.log(response.data);
        });

    }
}
Run Code Online (Sandbox Code Playgroud)

这是工作的小提琴