Vue Js Detect If User Has Scrolled to Bottom of The Page

In this short snippet, you will learn how to detect if the user has scrolled to the bottom of the page. This is very simple but has many use cases such as lazily load the content when only at bottom of the page, infinite loading resources, showing notification only when at bottom of the page, and more.

Vue Js Scroll and Check Position

Below is the implementation and how this works is that "@scroll" directive is attached to the div element tag and upon scrolling it will call the "onScroll" function. This "onScroll()" function will then determine the scroll position which then if met the condition can call different methods.

<template>
  <div @scroll="onScroll"></div>
</template>

<script>
export default function () {
  methods: {
    onScroll ({ target: { scrollTop, clientHeight, scrollHeight }}) {
      if (scrollTop + clientHeight >= scrollHeight) {
        // now you can: 1 - call code to load more content
        // 2 - display notification or popup
        // 3 - etc etc...
      }
    }
  }
}
</script>