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.