Posts Learn Components Snippets Categories Tags 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

22 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>

Snippets by

PostSrc poster

PostSrc

Full stack developer mainly focusing on the front end side of the web. The main author of PostSrc and loves writing tutorial and guides online.

new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your project.

View Components

Other Code Snippets

More