How to get iScroll to work in an Ionic/Angular application

问题

Following on from a previous post, I have got iScroll to at least load into my Ionic application. I am doing this as I want flick scrolling on the app when running in a Windows Desktop environment, where you just get the Windows standard scroll as opposed o the native flick (momentum) scrolling as on a Mobile device

Just for testing, I have just done this the old fashion way of linking the script, and then finding the IScroll hanging off the window object (as I could not get it working importing the npm package.

So I copied the iscroll.js file to the assets, and adding the link into index.html..

<script type="text/javascript" src="assets/iscroll.js"></script>

Not ideal, but at least it allows me to test it to see if it is going to work for me.

I then have the following test code..

    import { Component, ViewChild, ElementRef } from '@angular/core';

    @Component({
      selector: 'app-home',
      templateUrl: 'home.page.html',
      styleUrls: ['home.page.scss'],
    })
    export class HomePage {
       public items: Array<string>;
       @ViewChild('wrapper') wrapper : ElementRef;

       constructor() {
          this.items = new Array<string>();
          for(let i = 1; i < 100; i++)
             this.items.push(`Item ${i}`) ;
      }

      public ngAfterViewInit() {
        try {
          let w = window as any;
          var myScroll = new w.IScroll(this.wrapper.nativeElement, {
            mouseWheel: true,
            scrollbars: true
        });
        } catch (error) {
          console.log(error);
        }
      }
    }

with the markup of

   <ion-header>
      <ion-toolbar>
        <ion-title>
          Ionic Blank
        </ion-title>
      </ion-toolbar>
    </ion-header>

    <!-- <ion-content scroll-y=false> -->
      <div #wrapper>
      <ul>
        <li *ngFor= 'let item of items'>
          {{item}}
        </li>
    </ul>
    </div>
    <!-- </ion-content> -->

I have debugged into the IScroll construction function, and can see that it successfully gets the div and applies various styles to it.

However, I just do not get any scrolling. I have disabled the Ionic scrolling on the content, and even remove the content control, but it still does not work.

I have the following Ionic environment..

    Ionic:

       ionic (Ionic CLI)             : 4.6.0 (C:\Users\peter\AppData\Roaming\npm\node_modules\ionic)
       Ionic Framework               : @ionic/angular 4.0.0-rc.0
       @angular-devkit/build-angular : 0.11.4
       @angular-devkit/schematics    : 7.1.4
       @angular/cli                  : 7.1.4
       @ionic/angular-toolkit        : 1.2.2

    System:

       NodeJS : v10.15.0 (C:\Program Files\nodejs\node.exe)
       npm    : 6.1.0
       OS     : Windows 10

Has anyone else tried this, or have any idea why it is not working from within the Ionic application?

Thanks in advance for any info.

来源：https://stackoverflow.com/questions/54006395/how-to-get-iscroll-to-work-in-an-ionic-angular-application

标签

angular

ionic-framework

iscroll