Scroll to the Bottom of a Div with Vue.js

Photo by Becca Tapert on Unsplash

There are various ways to scroll to a bottom of a div with Vue.js

In this article, we’ll look at how to scroll to the bottom of a div with Vue.js

Get the div and Set Scroll Top

We can set the scrollTop property of a DOM element to its scrollHeight so that scroll it to the bottom.

scrollHeight has the height of the element.

For example, we can write:

<template>
  <div id="app">
    <button @click="scrollToBottom">scroll to bottom</button>
    <div id="container" style="height: 200px; overflow-y: scroll">
      <p v-for="n in 100" :key="n">{{n}}</p>
    </div>
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    scrollToBottom() {
      const container = this.$el.querySelector("#container");
      container.scrollTop = container.scrollHeight;
    }
  }
};
</script>

In the scrollToBottom method, we get the div with the ID container .

And we set its scrollTop property and set it to the scrollHeight to scroll to the bottom of the div.

We can also get an element from the ref.

To do that, we write:

<template>
  <div id="app">
    <button…