Add Scroll Event to Window in Vue Component

2022-07-01

Today I learned how to add a on scroll event listener to the window property when a vue component is mounted.

This task turned out to be very simple in the end. So without further ado, here is the solution you are looking for 😉

<script setup>
import { onBeforeUnmount, onMounted } from "vue"

function logScroll() {
    console.log(window.scrollY)
}

onMounted(() => {
    window.addEventListener('scroll', logScroll)
})

onBeforeUnmount(() => {
    window.removeEventListener('scroll', logScroll)
})
</script>

Here is the StackOverflow Answer (opens new window) I learned this from.

See you next time! 😁

See you space cowboy