Scrolled callback called on each scroll

Hi,

The callback scrolled is called each time I used the mouse wheel, I try several configurations but none solved my issue.

This template is encapsulated in a body :

<div class="col-md-4 infinite-container" infinite-scroll [infiniteScrollThrottle]="1000" (scrolled)="onScrollDown()">
    <div class="content">
        <h1>{{ 'ADVERTISEMENT.SEARCH' | translate }}</h1>
    </div>
    <div class="content selectable" *ngFor="let result of results" (click)="onSelect(result)" [ngClass]="{'active' : isActive(result) }">
        <h4>{{ result.title }}</h4>
        <p>{{ result.price }} €</p>
    </div>
</div>

.infinite-container {
    height: 1000px;
}

Am I doing it wrong?

[joaogarin]

My issue was fixed by adding the missing DOCTYPE atrribute on the top of my html index file as mentioned here :

https://github.com/orizens/angular2-infinite-scroll/issues/7

😉

[iErik]

I was having the exact same problem. Solved it by changing the code from:

<div class="post-feed"
  infiniteScroll
  [infiniteScrollDistance]="2"
  [infiniteScrollThrottle]="500"
  (scrolled)="onScroll()"
>
  <ul class="post-feed-entries">
    <li class="post-feed-entry" *ngFor="let post of posts">
      <post-card
        [post]="post.data">
      </post-card>
    </li>
  </ul>
</div>

To:

<div class="post-feed" style="height: 100%"
  infiniteScroll
  [infiniteScrollDistance]="0"
  [infiniteScrollThrottle]="500"
  (scrolled)="onScroll()"
>
  <ul class="post-feed-entries">
    <li class="post-feed-entry" *ngFor="let post of posts">
      <post-card
        [post]="post.data">
      </post-card>
    </li>
  </ul>
</div>