How to use infinite scroll in my contact list

I am using ionic 4 and trying to use infinite scroll to avoid slow display of the contact list.
but don’t know how to use this facility properly . please help. Is there any other way to load the contact list fast in my app . the display time is too long . please give some valuable suggestions . I am struggling with this for 2 or 3 days.

in my .ts file

 contactList: any[] = [];  

constructor(public navCtrl: NavController,private router: Router, 
     private contacts: Contacts , private sanitizer: DomSanitizer,) { 
  
    this.fetchDeviceContact();

}

fetchDeviceContact(){
	

    this.contacts.find(["displayName", "phoneNumbers","photos"], {multiple: true}).then((contacts) => {
       
      for (var i = 0; i < contacts.length; i++) {
        if (contacts[i].displayName !== null) {


           var name  = contacts[i].displayName;
           var number =  contacts[i].phoneNumbers[0].value;
           if(contacts[i].photos !== null){
           var photo = this.sanitizer.bypassSecurityTrustUrl(contacts[i].photos[0].value);
           }else{
            photo = '';
           }

            var contactData={
		                        "displayName":name,
		                        "phoneNumbers":number,
		                        "logo":photo,		                      
		                    }


          this.contactList.push(contactData);

           this.contactList.sort(function(a, b) {
             return compareStrings(a.displayName, b.displayName);
          });  

        }
      }
     
    });



	function compareStrings(a, b) {
				var nameA = a.toUpperCase(); // ignore upper and lowercase
				var nameB = b.toUpperCase(); // ignore upper and lowercase

				if (nameA < nameB) {
					return -1;
				}
				if (nameA > nameB) {
					return 1;
				}

				// names must be equal
				return 0;
	}

 loadData(event) {
    setTimeout(() => {
      console.log('Done');
      event.target.complete();

      if (data.length == 1000) {
        event.target.disabled = true;
      }
    }, 500);
  }

  toggleInfiniteScroll() {
    this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
  }


}

in .html file

<ion-content padding >
     <ion-content padding >
      <ion-searchbar  ></ion-searchbar>
      <ion-list  *ngFor="let contact of contactList; let i = index;" >   <!-- {{contact | json}} -->
      <ion-item >
      <ion-grid>
      <ion-row>
        <ion-col>
          <div>
          	<ion-img [src]="contact.logo"></ion-img><img [src]="contact.logo">
            <ion-icon ios="ios-person" md="md-person"></ion-icon> <b>  {{contact.displayName}}</b>
          </div>
        </ion-col>
        </ion-row>
      <ion-row>
        <ion-col  size="10">
          <div>
            <ion-icon item-start  ios="ios-call" md="md-call" ></ion-icon> {{ contact.phoneNumbers}}
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
    </ion-item>
    </ion-list>

 
<ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
   
</ion-content>

Thank in advanced.

So, is it going this way?

<ion-content>
   <div>
      <!-- some content here -->
   </div>
    <div class="fixed">
        <ion-list>
           ...
        </ion-list>
    </div>
</ion-content>

and CSS is:

.fixed[scrollx=true], div[scrolly=true] {
  position: relative;
  overflow: hidden;

  ::-webkit-scrollbar {
    display: none;
  }
}

.fixed[scrollx=true] {
  overflow-x: auto;
}

.fixed[scrolly=true] {
  overflow-y: auto;
}

cheers!!