Posts Learn Components Snippets Categories Tags Tools new About
/

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

Learn how to detect if the user has scrolled to the bottom of the page in Vue Js to infinite load content or fire an events

Created on Sep 11, 2021

267 views

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>

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

)