ionic 3 infinite scroll is not working until content scroll to top and then bottom

I am trying to load some more data in ionic 3 project. The infinite scroll is working only for the first time. And then it is stop working until the page scroll to top and then bottom.

Here is my code

HTML

<ion-content>
    <ion-scroll style="width:100%;height:100vh" scrollY="true">
        <ion-list *ngIf="posts.length>0">
            <button *ngFor="let post of posts" ion-item>
        <ion-thumbnail item-start>
            <img [src]="getPostImage(post)">
        </ion-thumbnail>
        <h2>{{ post.title.rendered }}</h2>
    </button>
        </ion-list>
        <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
            <ion-infinite-scroll-content loadingText="Loading..."></ion-infinite-scroll-content>
        </ion-infinite-scroll>
    </ion-scroll>
</ion-content>

TypeScript

doInfinite(infiniteScroll) {
    this.getCategoryPosts(infiniteScroll);
}

getCategoryPosts(infiniteScroll=null){
       this.api.getCategoryPosts({
        id : this.topic.id,
        limit : this.limit,
        page:this.page,
        success:(posts)=>{
          this.zone.run(()=>{
            if(this.page >1){
              this.posts = this.posts.concat(posts);
            }else{
              this.posts = posts;
            }
              this.page++;
              if(infiniteScroll!=null)
                  infiniteScroll.complete();
          });

        },
        error:(error)=>{
          console.log(error);
        }
      });

  }