Trigger the handler on a window resize event

[renehamburger]

The handler and the check should really be triggered by a (vertical) resize of the window as it can have the same effect as a scroll. Otherwise the user might lose the scroll bars altogether and be unable to trigger the scroll event. This is related to #85.

[orizens]

@renehamburger yes you are correct - a listener to a resize event should also be attached.

[orizens]

@renehamburger can you supply a plunkr which shows if that's an issue?

[renehamburger]

You can reproduce this with your own demo plunkr:

If you change the initial value of sum to 20 and reduce the window height to get a vertical scroll bar. Then infinite scroll is working as expected. Let's take this to be the initial setup, as the infinite scroll should be initialised by loading enough items for the scroll bar to show.

But if you know increase the window height until the scroll bar disappears, the infinite scroll loader should be triggered again, as the user won't be able to trigger it by scrolling again.

[orizens]

@renehamburger I rethought the resize issue. I think that in terms of ux, it might be weird to trigger an "auto" scroll event when i change the window height and the scroll appears. Perhaps this behavior may be useful in some cases or in situations where this is the desired ux feature.

[pkantsedalov]

@renehamburger Have you got any solution of this bug? Experiencing it now, asking for help please.

[renehamburger]

The workaround is to subscribe to the resize event yourself in the component that uses infinite scroll (or a base component it extends):

    Observable.fromEvent(window, 'resize')
      .takeUntil(componentDestroyed(this))
      .debounceTime(100)
      .subscribe(() => this.requestMoreEntriesIfNeeded());

with requestMoreEntriesIfNeeded() checking if the scrollable element now has a scrollbar and whether more data is available and then loading the next page. If the scrollable element is window/document/body you can check it with:

function windowHasScrollBar(overlap = 0): boolean {
  const contentHeight = Math.max(document.documentElement.scrollHeight, $('html')[0].scrollHeight, $('body')[0].scrollHeight);
  return contentHeight > window.innerHeight + window.pageYOffset + overlap;
}

Otherwise with:

element.scrollHeight > element.clientHeight + overlap;

[skareer95]

Hi @orizens

I checked out many tasks related to this issue & you have clarified that this is something related to UX, but at some points you were not sure about it in some comments. what you think about this issue today?