How to detect when a user scrolls to the bottom of a div - Vue

Question

I'm currently trying to implement infinite scrolling on my website, I'm using Vue Framework. There are a few infinite loading libraries for Vue but after integrating them, they had a few issues that were too major for me.

I already have it so I can add more data into an array once a certain condition is met, I just need to be able to detect when the bottom of a div is reached/scrolled down to.

I do need to integrate this with a for loop in Vue though which seems to not work with some common solutions. This is essentially what my code looks like.

<div id="container">
    <div v-for="object in objects">
        <div class="class123">
            <p>Display Stuff</p>
        </div>
    </div>
</div>

How would I go about detecting when a user scrolls down to the bottom of container? I tried and it worked without Vue but once I add Vue in, it doesn't seem to work:

jQuery(function($) {
    $('#container').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            alert('end reached');
        }
    })
});

I'd appreciate some help, thank you.

Answer 1

Credit to Phan An .

You have to catch the scroll event of the div itself and bind it to a method that calculates the scroll position and determines whether you scroll at the bottom. Using plain Vue:

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

<script>
export default function () {
  methods: {
    onScroll ({ target: { scrollTop, clientHeight, scrollHeight }}) {
      if (scrollTop + clientHeight >= scrollHeight) {
        this.loadMorePosts()
      }
    }
  }
}
</script>

Working on the latest version of Chrome, Chromium Edge, and Firefox as of the posting date.

Answer 2

You can do it with this NPM package [Vue Infinite Scroll][1] if you don't mind adding new dependency.

you can also see working example in this CodePen: https://codepen.io/fayazara/pen/PLmRLz

check this Medium article for more explanations