[Fixed] ngx-infinite-scroll event not being triggered when scroll is complete

Issue

I am trying to implement infinite scroll using ngx-infinite-scroll in an angular 4 app but it its not being triggered. I read the documents and set the height of the element and set scrollWindow to false so that its triggered when the element is scrolled and not the entire page. However I can’t get it to fire.

What am I doing worng?

I’ve created a plnkr to reproduce the issue

html

<div class="search-results"
     infinite-scroll
     [infiniteScrollDistance]="0.1"
     [infiniteScrollThrottle]="10"
     [scrollWindow]="false"
     (scrolled)="onScrollDown()">
  <p *ngFor="let i of is">
    {{i}}
  </p>
</div>

css

.search-results {
  height: 100px;
  overflow: scroll;
}

component

protected is = ['Item1', 'Item2', 'Item3'];

onScrolledDown() {
    console.log("scrolled");
}

Solution

I’m using bootstrap 4 so you have to disable flex for it to work properly

.search-results {
  height: 100px;
  overflow: scroll;
  flex: none;
}