orizens/angular2-infinite-scroll

Infinite Scroll Directive For Angular (version 2 up to 2.3.1)

angular2-infinite-scroll's Issues

infinite-scroll offset in pixels

There is any way I can set offset before user scroll on bottom to trigger the function

Cannot read prototype 'clientHeight' of null

PositionResolver.prototype.height = function (elem) {
var offsetHeight = this.axis.offsetHeightKey();
var clientHeight = this.axis.clientHeightKey();
// elem = elem.nativeElement;
if (isNaN(elem[offsetHeight])) {
return this.getDocumentElement()[clientHeight]; //error
}
else {
return elem[offsetHeight];
}
};

Wrong scroll direction on container initialisation or reload leads to fast scroll event being lost

Under certain condition, your InfiniteScroll directive interprets an initial downwards scroll as an upwards scroll. When the following downward scroll is then done within the throttling time, it will not emit the scroll event at all, as scrollStats === {isScrollingDown: false, shouldScroll: false}.

You should be able to reproduce this in your modal plunkr as follows:

• reduce the window height to about 500px
• open the modal
• scroll the scroll bar in the modal down as far as possible
• close the modal
• scroll the page down

For me, this always triggers an upwards scroll event.

Our setup is somewhat different. In two cases, your directive registers an initial upwards scroll without the user having scrolled up:

1. On a reload of an infinite list that is already scrolled down a bit. During the reload, the list is temporarily emptied so that the scroll bar disappears. When that happens, an upwards scroll event is triggered.
2. During the initialisation of a infinite list in a modal, with a scroll bar appearing and disappearing in the init process. When the user then scrolls down, an upward scroll event is triggered.

position check happens before browser is ready

We had previously used ng-infinite-scroll and are upgrading to angular 2, so this project has been greatly appreciated. However, we find the behavior is changed from the angularjs version and is confusing from the docs. The position check happens so quickly that the browser has not fully updated the window position before the decision is taken on whether to emit the scrolled event.

I don't have an example available, but it is easy to reproduce in both Chrome and Firefox. Just scroll for a few pages to load some content. Then return to the top of the screen. Now use Ctrl-End or scroll very quickly to the bottom of the page. The (scrolled) output will not be invoked and it will appear there is no more content. But moving the scrollbar slightly will then load more content.

One way to avoid this outcome is to reduce infiniteScrollThrottle, e.g. 1 ms. So that one of the many window scroll events is more likely to fire when the browser is closer to the bottom of the page, but this will also mean the utility of the throttle is sacrificed.

I've found the behavior with the undocumented '[debounce]="true"' option is closer to the previous ng-infinite-scroll behavior. Maybe this should be made the default?

I want to trigger the scrolled function when the scroll move to the bottom and it not work,help!

my angular version is 4.
the template is below

<div class="row"  infinite-scroll [infiniteScrollDistance]='0' (scrolled)="onScrollDown()">
                  ....show list....
</div>

I want to achieve a function that trigger the function onScrollDown() to load more data when the scroll move to the end.
so I set infiniteScrollDistance = '0' ,but it seem that not work.
when the scroll move to the middle and it will be trigger the function onScrollDown() ..it's not what i want.
how can i fix it ? thanks in advance.

(scrolled) and (scrolledUp) not fired

I am using angular2-infinite-scroll in my application.
I have added

in my template html file and also added

onScrollDown(event) {
    console.log('scrolled down!!');
}

onScrollUp(event) {
    console.log('scrolled up!!');
}

in my component. I am able to see the scrollbar on my div but on scrolling these events are not firing.

If I changed the and only add (scroll) then event is fired but I am not able to find the direction of scrollbar (i.e Up or down scroll). Could you please help me to get the direction of scroll here or suggest me what I am missing if I want to handle the onScrollDown and onScrollUp function.

Waiting for your reply
thanks.

infinite scroller is not working when i added this module .

I am getting browser console error like

nhandled Promise rejection: (SystemJS) Unexpected token <
SyntaxError: Unexpected token <
at eval ()
at Object.eval (https://portal.mingledev.infor.com:9443/Scripts/generated/main.js:14:29)
at eval (https://portal.mingledev.infor.com:9443/Scripts/generated/main.js:43:4)
at eval (https://portal.mingledev.infor.com:9443/Scripts/generated/main.js:44:3)
at eval ()
Evaluating https://portal.mingledev.infor.com:9443/ngx-infinite-scroll
Evaluating https://portal.mingledev.infor.com:9443/Scripts/generated/main.js

Limit SCROLL Data call when it reaches initial set of records

I am using angular2-infinite Scroll. My requirement is to show Initial set of records(i.e 25) with in Table body inside DIV on which I have attached Scroll (angular2-infinite-scroll). When User scroll up or down then I need to have capture the scroll up and scroll down event . At the same time I need to ensure that when it reaches at peak or bottom then it will fetch data.Currently I am able to have POC in which i can fetch data on the click of up and down of scroll. I am looking for inputs how if I can limit the data from server only when the scroll reaches to top or bottom.

Can u please provide any inputs

unit testing not working

Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

If i remove infiniteScroll attribute from html then it works fine.