Check if a user has scrolled to the bottom in Vue.js

in Code

Check if a user has scrolled to the bottom in Vue.js

This snippet will be useful for those trying to implement an infinite scroll in Vue.js or load next article when user reaches the bottom of the page.

I came up with a working solution and I wanted to share it with you.

How to find when the user is at the bottom of the page

To achieve that create a new function called scroll and place it within the methods block. This function will calculate if the page offset is equal to the page height. Here is an example:

scroll () {
  window.onscroll = () => {
    let bottomOfWindow = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop) + window.innerHeight === document.documentElement.offsetHeight

    if (bottomOfWindow) {
     this.scrolledToBottom = true // replace it with your code
    }
 }
}

Call this function in the mounted() function.

mounted () {
  this.scroll()
}

Now you’ll know when the user scrolls to the bottom. You may want to declare a scrolledToBottom boolean in the data object and use it in your template. Or you can create a function that will load the next page and place it within the scroll function.

If you find it useful, please let me know in the comments below.

Make sure you also check how to do Vue.js polling using setInterval() and know the difference between LocalStorage vs SessionStorage vs Cookies.



Subscribe to my newsletter ✌️

Subscribe



Write a Comment

Comment