Vue method scroll div to top

user_2469528 0
Viewed 55927

I am learning vue. I have the following method where I add a chat message to a div with id="toolbar-chat". This div allows scrolling on y axis and I would like the div to jump to the top every time a new message is added. Why is my JS not working?

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

My vue method:

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

        }
    }
vuejs2 javascript
5 Answers

Here is my solution :

One global div in main container

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

One global function put in the Vue prototype : 

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

The same anchor everywhere : 

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

This is old, but for someone who want to find solution like me:

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

}
user_78621580

If you want to scroll with animated way;

  • Add scrollTo with an object parameter
  • Check your ref element ( in my case $refs[refName][0] )
  • If you need to use scroll one more place, add into global scope. (Vue.prototype.$toScroll) then use ( $toScroll() )

Here is the basic usage.

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

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

This is the method, you can use everywhere.

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

I used this to make it work:

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