Sometimes, we want to scroll to bottom of the div with Vue.js

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

How to scroll to bottom of the div with Vue.js?

To scroll to bottom of the div with Vue.js, we can call the HTML element’s scrollIntoView method.

For instance, we write

<script>
export default {
  methods: {
    scrollToElement() {
      const el = this.$refs.scrollToMe;
      if (el) {
        el.scrollIntoView({ behavior: "smooth" });
      }
    },
  },
};
</script>

to get the element we want to scroll to with this.$refs.scrollToMe and assign it to el.

Then we call el.scrollIntoView to do the scrolling to the element that the ref is assigned to.

We set behavior to 'smooth' to make the scrolling smooth.

Conclusion

To scroll to bottom of the div with Vue.js, we can call the HTML element’s scrollIntoView method.