Sometimes there's a need to make a smooth scroll in to some html element/component on any event.
Vue 2 example:
<template>
<div>
<some-component ref="comp">element</some-component>
<button @click="scrollTo">Click me</button>
</div>
</template>
<script>
export default {
methods: {
scrollTo() {
this.$refs.comp.$el.scrollIntoView({ behavior: 'smooth' })
}
}
}
</script>
Vue 3 example:
<template>
<some-component ref="comp">element</some-component>
<button @click="scrollTo">Click me</button>
</template>
<script setup>
const comp = ref(null)
function scrollTo() {
comp.value.scrollIntoView({ behavior: 'smooth' })
}
</script>
$el
is not available anymore in a Vue 3.