scroll is not triggered properly if scrolled quickly

[thekalinga]

Scroll does not gets triggered if I scroll down to the bottom quickly. The event does not get triggered if I wait at the bottom of the page much beyond infiniteScrollThrottle. However, It gets triggered if I scroll up from the bottom of the page.

But, if I scroll down slowly, the event is being triggered while I scroll down.

Here is the markup I have for the container div

<div class="items-container">
    <div class="items" infinite-scroll
             infiniteScrollDistance="1.5"
             infiniteScrollThrottle="300"
             infiniteScrollContainer=".items-container > .items"
             scrollWindow="false"
             (scrolled)="onLoadMore()">
        <!-- ... items -->
    </div>
</div>

Look at the screencast of the issue (Open image in a new window to see larger version of it)

[jmesa-sistel]

You can reproduce it easily if you use a mobile device.

Similar bug: open: http://echoesplayer.com/#/ and press end key, you scroll down but the is no load

[orizens]

hi @thekalinga this issue has been discussed before #67 . the suggested solution is to set a lower throttle value.

[thekalinga]

I set threshold to 10, still I have the same issue.

[thekalinga]

For some reason, I'm not getting it now (have refactored the code slightly, tho that's unrelated to the change at hand). :)

Will try it out for a while to see if I can reproduce it

[thekalinga]

I have faced this issue again today with a threshold of 10.

The issue is seen if the last scroll reaches the end of the scrollbar, i.e if the after the last leg of scrolling, if there is no more space left, the event is not being triggered.

If by off chance if there is some space left, it does trigger the scroll event (which happens most of the time)

Again, threshold only delays the event trigger, meaning, the event should get published if you leave the mouse alone once it reaches the end. But that's not the case.

[liangtongxie]

+1

[SridharSathya]

I am also facing the same issue

[jcroll]

Oh goody I hope this is working 🎉

[jcroll]

If this works @orizens would you mind tagging a new minor release?

[orizens]

Version 0.5.0 is already available

On Mon, Apr 24, 2017, 19:13 Jarrett Croll notifications@github.com wrote:

If this works @orizens https://github.com/orizens would you mind tagging a new minor release?

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/orizens/ngx-infinite-scroll/issues/128#issuecomment-296723891, or mute the thread https://github.com/notifications/unsubscribe-auth/AA1oRKw9orJvz6RHXcCVgGUz8PEnJOaFks5rzMowgaJpZM4MPqL6 .

--

Oren Farhi CEO at Orizens.com Senior Front End Engineer & Consultant http://www.orizens.com

[jcroll]

OK cool @orizens, I clearly have no idea how to track the release of a specific npm package. Your latest github version says 0.2, the version in your package.json on master says 0.4.3, then on npm it says your latest release is 0.5.0 as you say.

I've never published a npm package before, clearly something is escaping me :\

[orizens]

@jcroll just updated the repo's master to 0.5.0. npm is also updated to 0.5.0.

[erezsharir]

Hi,

I'm still experiencing this issue - when scroll reaches the end, there's no scrolled event.

Using release 0.5.1

[sanjitvimal]

Tried with version "ngx-infinite-scroll": "0.6.1" Parameters -- [infiniteScrollDistance]="2" [infiniteScrollThrottle]="100" or "10" or "50" [scrollWindow]="false" Facing same issue.. Success --

1. clicking on scroll bar down arrow -- working fine.
2. Scroll down slowly (Mouse wheel / cursor) -- working fine.

Failed --

3. Scroll down fast --> scroll event is not firing when reached to lowest position of scroll bar. Then scroll up little bit and scroll down to fire scroll event.. So, to fire scroll event will have move cursor up and down..

is this working in any version?

Lower infiniteScrollThrottle e.g. 10 has some another issue. Multiple(Next --> next set of data) events are getting fire before consuming on UI..

[sanjitvimal]

Its working fine with version 0.5.2 .. added debounce attribute also. Thanks.. good plugin..

We need to check with latest version. for this issue..

[djoufouf]

i have the same issue , did you found a solution @orizens @thekalinga

[wonkaba]

I am definitely still experiencing this in 10.0.1.

[fereshenteti]

Hello, I think I have found a little workaround that fixes this issue by setting the infiniteScrollThrottle to 0, and make your own throttling method.

So here's how I did it:

in the HTML side, use these attributes:

[infiniteScrollThrottle]="0"
(scrolled)="loadMore()"

on the other hand, in the ts file, make your own throttling condition in the loadMore() function:

loading = false;
loadingThrottle = 300;

loadMore() {
    if (!this.loading) {
      this.loading = true;

      window.setTimeout(() => {

        // your loading logic here..

        this.loading = false;
      }, this.loadingThrottle);
   }
}

Hope this helps.