Question

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

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

我的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);
            });

        }
    }

Answer 1

这是因为vue以异步方式更新dom。见Reacivity in depth(Async update Queue)

要立即反映更改，请使用vm.$nextTick(callback)
而不是使用document.getElementById()查询dom元素我建议您在ref元素中添加toolbar-chat属性，并使用this.$refs在方法中引用它。有关ref属性
的更多信息，请参阅docs
```
 <div id="toolbar-chat" ref="toolbarChat"></div>
```

所以你的方法应该是

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);
        });

    }
}

这是工作fiddle

Answer 2

这是我的解决方案：

主容器中的一个全局div

<div id="topDiv"></div>

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

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

到处都是同一个锚：

<a @click="$scrollTop">Go to the top</a>

Answer 3

这很老了，但是对于想要找到像我这样的解决方案的人来说：

addMessage(message) {
    this.messages.unshift(message);
    this.$nextTick(() => {
        // block: 'end' will scroll to top of element instead of bottom
        this.$refs.toolbarChat.$el.scrollIntoView({ block: 'end', scrollBehavior: 'smooth' });
    });

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

}

Answer 4

我用它来使其工作：

document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera

Answer 5

如果要以动画方式滚动；

使用对象参数添加scrollTo
检查您的ref元素（在我的情况下为$ refs [refName] [0]）
如果需要再滚动一个位置，请添加到全局范围中。（Vue.prototype。$ toScroll）然后使用（$ toScroll（））

这是基本用法。

<a @click="toScroll('aKeyValue',0)"></a>

<div  :ref="'aKeyValue'"  class="scrollable">...</div>

这是一种方法，您可以在任何地方使用

toScroll(refName,position){
   this.messages.unshift(message);
   this.$nextTick(() => {
       this.$refs[refName][0].scrollTo({ top: position, behavior: 'smooth' });
   });
}

Vue方法将div滚动到顶部

5 个答案: