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.

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.

• javascript
• html
• vue.js

• 1 You are mixing two different frameworks together jQuery and Vue. There is plenty examples on internet how to implement infinite scroll only in Vue, like: medium.com/@rafaelogic/… – Marius Jaraminas Commented Jan 5, 2020 at 19:19
• I see, I didn't think it would be difficult to implement something small like that. I did end up getting vue-infinite-loading to work though, so thanks. – Anthony Commented Jan 6, 2020 at 16:50
• Don't mix vue and jquery as JQ manipulates the DOM directly and vue uses a virtual dom – Dazzle Commented Aug 11, 2021 at 9:40

2 Answers 2

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.

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