我正在学习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)
这是由于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)
这是工作的小提琴