To scroll to an element in Vue.js:
- Set a ref on the target element.
- Call
scrollIntoView()on the target ref.
// Set ref on target element
<div ref="targetRef" style="background-color: lightblue;">
My Target Element
</div>// Scroll to element
this.$refs.targetRef.scrollIntoView({ behavior: 'smooth' });We can use this approach to scroll to an element when another trigger element is clicked.
We’ll first need to set a click event listener on the trigger element.
Then we’ll call scrollIntoView() in the listener.
<template>
<div id="app">
<button @click="handleClick">Scroll to element</button>
<div style="height: 150rem;"></div>
<div ref="targetRef" style="background-color: lightblue;">
Coding Beauty
</div>
<div style="height: 150rem;"></div>
</div>
</template>
<script>
export default {
data() {
return {
ref: null
};
},
methods: {
handleClick() {
this.$refs.targetRef.scrollIntoView({ behavior: 'smooth' });
}
}
};
</script>
Scrolling on click is great for quick navigation.
It improves the user experience.
It’s great for long lists and pages with many sections.
It makes apps more interactive with smooth-scrolling animations.
We set the ref prop of the target element to create a Vue ref.
Doing this lets us access the component’s HTML element directly from the $refs instance property.
We use the @click event to set an event listener that will be called when the trigger element is clicked.
<button @click="handleClick">Scroll to element</button>methods: {
handleClick() {
this.$refs.targetRef.scrollIntoView({ behavior: 'smooth' });
}
}We can use this same combo of refs and scrollIntoView() to scroll to an element in React.
In the click listener, we call the scrollIntoView() method on the ref of the target div element to scroll down to it and display it to the user.
We set the behavior option to smooth to make the element scroll into view in an animated way, instead of jumping straight to the element in the next frame – auto.
auto is the default.
Scroll to dynamic element on click in Vue.js
We can do something similar to scroll to a dynamically created element in Vue.js:
<template>
<div id="app">
<div
style="
position: fixed;
background-color: white;
bottom: 0;
margin-bottom: 10px;
"
>
<button @click="addFruit">Add fruit</button>
<button
@click="scrollToLastFruit"
style="margin-left: 8px"
>
Scroll to last
</button>
</div>
<div style="height: 5rem"></div>
<div ref="fruitList">
<h2
v-for="fruit in fruits"
:key="fruit"
>
{{ fruit }}
</h2>
</div>
<div style="height: 150rem"></div>
</div>
</template>
<script>
const allFruits = [
'Apples',
'Bananas',
'Oranges',
'Grapes',
'Strawberries',
'Blueberries',
'Pineapples',
'Mangoes',
'Kiwis',
'Watermelons',
];
export default {
data() {
return {
fruits: allFruits.slice(0, 3),
};
},
methods: {
addFruit() {
this.fruits.push(allFruits[this.fruits.length]);
},
scrollToLastFruit() {
const lastChildElement =
this.$refs.fruitList.lastElementChild;
lastChildElement?.scrollIntoView({
behavior: 'smooth',
});
},
},
};
</script>
Here we have a list of fruits displayed.
The Add fruit button dynamically adds an item to the fruit list on click.
Then the Scroll to last button scrolls to this item on click, as it’s the last in the list.
Like before, we use the @click event to set a click event listener on the button.
This time we set the ref on the list instead of the items since the items are created dynamically, and the last item will not be constant.
Doing this sets the Vue instance’s $refs.inputList property to the DOM object that represents the list element.
In this listener, we use the lastElementChild property of the list element to get its last item element. Then we call scrollIntoView() on this last item to scroll down to it.
methods: {
addFruit() {
this.fruits.push(allFruits[this.fruits.length]);
},
scrollToLastFruit() {
const lastChildElement =
this.$refs.fruitList.lastElementChild;
lastChildElement?.scrollIntoView({
behavior: 'smooth',
});
},
},Scroll to element after render in Vue.js
To scroll to an element after render in Vue.js:
- Set a ref on the element
- Create a
mountedlifecycle hook to run code just after the component mounts. - Call
scrollIntoView()on the ref object in themountedhook.
<template>
<div>
<div style="height: 150rem"></div>
<div
ref="target"
style="background-color: blue; color: white"
>
Coding Beauty
</div>
<div style="height: 150rem"></div>
</div>
</template>
<script>
export default {
mounted() {
this.scrollToElement();
},
methods: {
scrollToElement() {
this.$refs.target.scrollIntoView({
behavior: 'smooth',
});
},
},
};
</script>
Scrolling after page loads help users find info.
It also helps fix errors.
It’s great for those who use special software.
It makes browsing the webpage easier.
We create a Vue ref by setting the target element’s ref prop to a string ("target")
We’ll then be able to access the HTMLElement object representing this object from the $refs property of the Vue instance (this.$refs.target).
The mounted method is a Vue lifecycle hook that runs just after the component has mounted. This is similar to useEffect in React.
In mounted, we call the scrollIntoView() method on the ref of the target div element to scroll down to it and display it to the user.
We set the behavior option to smooth to make the element scroll into view in an animated way, instead of jumping straight to the element in the next frame (auto).
auto is the default.
Key takeaways
- To scroll to an element in Vue, set a ref on the target element and call
scrollIntoView()on the ref. - To scroll to a dynamically created element in Vue.js, set the ref on the list element and use
lastElementChildto scroll to its last item. - To scroll to an element after render in Vue.js, create a
mountedlifecycle hook and callscrollIntoView()on the ref object in the mounted hook.
Every Crazy Thing JavaScript Does
A captivating guide to the subtle caveats and lesser-known parts of JavaScript.
