vue-infinite-loading: "loaded" doesn't stop loading

v2.1.3 - for some reason the “loaded” emit isn’t stopping it from continuing to load results down the page. I’m pretty sure this was working before, but I can’t figure out why this is happening.

So, basically even though I haven’t scrolled down, it keeps hitting my server and loading more results. Here’s my onInfinite function:

onInfinite () {
        api.tracks.get(PAGE_AMOUNT, this.tracks.length, tr => {
          console.log(`TRACKS: ${this.tracks.length}`)

          if (tr.length > 0) {
            this.tracks = this.tracks.concat(tr)
            if (tr.length < PAGE_AMOUNT) {
              this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete')
            } else {
              this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded')
            }
          } else {
            this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete')
          }
        })
      }

My template:

<template>
  <div id="track-list">
    <TrackItem v-for='(track, index) in tracks' :track='track' :index="index" :key='track.id'/>
    <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading" spinner="waveDots"></infinite-loading>
  </div>
</template>

I did put console logs in and it IS hitting that else where it sends the loaded emit. I also changed it to :complete and it stopped calling at that point in the code. So it is emitting, it just seems like its not caring - or for some reason it thinks that its scrolled down.

Anything I’m doing wrong? Or any ideas on how to debug it further?

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 5
Comments: 51 (22 by maintainers)

Commits related to this issue

Add force-use-infinite-wrapper support and throw warning when be in an infinite loop #55 — committed to PeachScript/vue-infinite-loading by PeachScript 7 years ago

Most upvoted comments

Hi all participants @DaveSanders @Akari1987 @PenAndPapers @rodwin @mcmillion @vbabenko @adamyarger @duyhung85 , I have no idea about how to find the real scroll parent, but this issue has been created for 2 months, so I plan to add a special property to solve it, looks like this:

<div infinite-wrapper>
  <div style="overflow: auto;">
    <infinite-loading force-use-infinite-wrapper="true"></infinite-loading>
  </div>
</div>

The special property called force-use-infinite-wrapper, it will find the closest parent node which has infinite-wrapper attribute, and it will ignore other parent node, even if some parents has overflow-y: auto|scroll CSS styles.

What do you think about the solution? And how about the attribute name force-use-infinite-wrapper?

Best regards.

+12

PeachScript on Aug 23, 2017

@vbabenko thanks for your appreciation! This plugin will calculate distance through the getBoundingClientRect().top of infinite-loading element and the getBoundingClientRect().bottom of scroll container, the distance is expected when the top - bottom <= the passing distance, but if the scroll container has automatic height, the distance will always be expected…

So I think should to add a additional condition to process it, I will as soon as possible.

PeachScript on Jul 14, 2017

Hi everyone, v2.2.0 has been released, include the force-use-infinite-wrapper feature, you can try it now, please feedback to here if you find any problem, thanks 😄

PeachScript on Sep 15, 2017

I’m seeing this issue as well with VueJS 2.3.4. I’m also seeing it send out two events each time.

mcmillion on Jul 5, 2017

@junpls I see, thanks for your explanation, I will add responsive support the force-use-infinite-wrapper property in the next version.

PeachScript on Oct 10, 2017

Sounds good. It would be nice to update documentation, this property is not obvious for those who doesn’t aware about this issue

vbabenko on Aug 31, 2017

@vbabenko @Akari1987 I have encountered a thorny problem. For now, this plugin will find the closest parent node that has overflow-y: auto CSS style as the scroll container, but in the example that provided by @vbabenko , the closest overflow-y: auto parent node is not the real scroll container, so I have planed to check the height property at the same time, if the element has overflow-y: auto, and it’s height property not be auto or it’s max-height property not be none, auto or 0px, it should be the real scroll container. The problem is, I did not found a better way to detect whether a element’s height property is auto, do you have any idea?

PeachScript on Jul 21, 2017

When I use in nested component, I have same issue.

Akari1987 on Jun 27, 2017

This works for me:

mounted() {
       window.addEventListener('scroll',this.onscroll)
 },
onscroll: async function (event) {
      const scrollY = window.scrollY
      const visible = document.documentElement.clientHeight
      const pageHeight = document.documentElement.scrollHeight
      const bottomOfPage = visible + scrollY >= pageHeight

      if (bottomOfPage || pageHeight < visible) {
            this.fetchPosts()
           console.log('At the bottom');
      }
},

Ref: https://scotch.io/tutorials/simple-asynchronous-infinite-scroll-with-vue-watchers

lautiamkok on Aug 22, 2018

@PeachScript this is what I’m trying: (It should say “infinite” on the left side as well) ab2e398604bab119

junpls on Oct 9, 2017

I dunno but I have been testing around, what i have noticed is that first you have to set the height of your body to auto then this listen will do a great work:

window.onscroll = function(ev) {
    if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
        // scroll hits the floor, then you can call the function
    }
};

JefferyHus on Sep 5, 2017

I have same issue (Vue 2.3) and vue-infinite-loading (2.1.3) sends event all time. Similar case to @DaveSanders. I tried to create jsFiddle but I could not reproduce https://jsfiddle.net/vbabenko/fb6r82eb/3/ even with flexbox. It’s pretty hard to move part of project to jsfiddle for reproducing…

@PeachScript Could the issue be related to css?

vbabenko on Jul 10, 2017

I am also experiencing this issue. The event keeps on firing even if I am not scrolling. Its weird because I just followed the guide. I am using elementUI’s table

rodwin on Jul 5, 2017