Ngx-infinite-scroll: What if there is no scrollbar ?

[BenDevelopment]

Hi,
In the scroll by window example (https://plnkr.co/edit/DrEDetYnZkFxR7OWWrxS?p=preview), when you are on a hight definition (1080p), there is no scrollbar, then it's not possible to scroll down to activate the scroll event. That forces the user to resize the window to make the scrollbar visible to activate the scroll event.
How can we force the infinite scroll to load enought elements to make the scrollbar visible ?

Would it not be better to use a witness div at the bottom of the list, wich load a new item if it's visible ?

[orizens]

hi @BenDevelopment
I think it's a matter of design decision other than this plugin's responsibility.

[orizens]

@BenDevelopment
however, the solution you describe, exists in react as react waypoint

[renehamburger]

What's needed in this case it to trigger the event until a scroll bar appears or until no more data is available. Something along the lines of:

  private onResponse(response: any) {
    if (response.hasNextPage && !containerHasScrollBar()) {
      this.getMoreEntries();
    }
  }

  private containerHasScrollBar(): boolean {
    return this.scrollWindow ?
      document.documentElement.scrollHeight > (window.innerHeight + window.pageYOffset) :
      this.container.scrollHeight > (this.container.clientHeight + this.container.scrollTop);
  }

@orizens, it would be helpful to include that kind of logic into this directive to reduce boiler plate code. It could be triggered by an input like @Input() triggerUntilScrollable: boolean that is set to false by the parent component if no more data is available.

[orizens]

@renehamburger
in some cases i agree.
however, it is impossible for the directive to know wether more entries, items or others are available, so, to decide that, you can disable the scroll listener with "clean" method. However, currently there's no way to attach the scroll again.

[orizens]

@BenDevelopment - rethinking about the preliminary issue - i still think it's a rather ux issue.

[jirikara]

Hi, what about using optional attribute "immediateCheck"?

It is my solution when the component is loaded first time, but when I change data for infinite scroll depand on parameter in same component "immidiateCheck" do not work. Any idea to fix it?

Thanks to all

[GunslingerBara]

I personally think this is something that the plugin should handle. In the event that the window size is larger than the number of elements, there is no scrollbar. The plugin should validate that there is no scrollbar and call the scrolled event once to make sure you can scroll. Otherwise, there is no way for the user to know that there is more data available...

[Amakaev]

@GunslingerBara +1

[orizens]

forcing to "re-calulate" again can be done via toggling the "infiniteScrollDisabled" input prop.
a window "onresize" event can be used in any app to use this (not all infinite-scroll are used with a window scroll listener).
I'm closing this issue.
if you still think this an issue/feature that is worth looking at it, please open an issue suggesting a possible solution.