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 @click="scrollToBottom">scroll to bottom</button>
<div id="container" ref="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.$refs.container;
container.scrollTop = container.scrollHeight;
}
}
};
</script>
We assign the ref to the container by adding the ref attribute.
Then in the scrollToBottom method, we get the container with this.$refs.container and set the scrollHeight the same way.
Scroll to an Element with a Given Selector
We can scroll to an element with the given selector with plain JavaScript.
We can get the element by using this.$el.querySelector method and call the scrollIntoView method to scroll it into view:
<template>
<div id="app">
<button @click="scrollIntoView">scroll into view</button>
<div id="container" ref="container" style="height: 200px; overflow-y: scroll">
<p v-for="n in 100" :key="n" :id="`num-${n}`">{{n}}</p>
</div>
</div>
</template>
<script>
export default {
name: "App",
methods: {
scrollIntoView() {
const el = this.$el.querySelector("#num-80");
if (el) {
el.scrollIntoView();
}
}
}
};
</script>
We set the id for each element inside the div with ID container .
Then in the scrollIntoView method, we get the element with this.$el.querySelector method.
And then we call scrollIntoView method if it’s found.
We can also assign it a ref and call scrollIntoView on it.
To do that, we write:
<template>
<div id="app">
<button @click="scrollIntoView">scroll into view</button>
<div id="container" style="height: 200px; overflow-y: scroll">
<p v-for="n in 100" :key="n" :ref="`num-${n}`">{{n}}</p>
</div>
</div>
</template>
<script>
export default {
name: "App",
methods: {
scrollIntoView() {
const [el] = this.$refs["num-80"];
if (el) {
el.scrollIntoView();
}
}
}
};
</script>
We get the refs and access the element with the ref by its index.
Then we call scrollIntoView on it.
Change Scrolling Behavior
We can change the behavior when we call scrollIntoView . To do that, we pass in an object to change the scroll behavior:
<template>
<div id="app">
<button @click="scrollIntoView">scroll into view</button>
<div id="container" style="height: 200px; overflow-y: scroll">
<p v-for="n in 100" :key="n" :ref="`num-${n}`">{{n}}</p>
</div>
</div>
</template>
<script>
export default {
name: "App",
methods: {
scrollIntoView() {
const [el] = this.$refs["num-80"];
if (el) {
el.scrollIntoView({ behavior: "smooth", block: "end" });
}
}
}
};
</script>
behavior changes the scrolling behavior.
'smooth' means smooth scrolling.
block determines when to stop scrolling. 'end' means we stop scrolling when the element we scroll to is visible at the bottom of the container.
Conclusion
We can scroll to the bottom of a div or a given element with the Vue.js by getting the element in various ways and calling native DOM methods.
