We have 2 segments and each one has an ion-list both in one ion-content on the page. the lists are scrollable,
the bug is that the scroller is one for the two lists - so when I scroll down in the first list and move to the second list, the second list scrolled down too. what we want to achieve is independent scrolling for each list in each segment. see code below which is taken from ioinc documentation. when running this you can replicate the issue. any one experienced this and have a solution?
<ion-header>
<ion-navbar no-border-bottom>
<ion-title>
Segments
</ion-title>
<ion-toolbar no-border-top>
<ion-segment [(ngModel)]="pet">
<ion-segment-button value="puppies">
Puppies
</ion-segment-button>
<ion-segment-button value="kittens">
Kittens
</ion-segment-button>
<ion-segment-button value="ducklings">
Ducklings
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<ion-content>
<div [ngSwitch]="pet">
<ion-list *ngSwitchCase="'puppies'">
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-puppy-1.jpg">
</ion-thumbnail>
<h2>Ruby</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-puppy-1.jpg">
</ion-thumbnail>
<h2>Ruby</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-puppy-1.jpg">
</ion-thumbnail>
<h2>Ruby</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-puppy-1.jpg">
</ion-thumbnail>
<h2>Ruby</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-puppy-1.jpg">
</ion-thumbnail>
<h2>Ruby</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-puppy-1.jpg">
</ion-thumbnail>
<h2>Ruby</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-puppy-1.jpg">
</ion-thumbnail>
<h2>Ruby</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-puppy-1.jpg">
</ion-thumbnail>
<h2>Ruby</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-puppy-1.jpg">
</ion-thumbnail>
<h2>Ruby</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-puppy-1.jpg">
</ion-thumbnail>
<h2>Ruby</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-puppy-2.jpg">
</ion-thumbnail>
<h2>Oscar</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-puppy-4.jpg">
</ion-thumbnail>
<h2>Zoey</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-puppy-3.jpg">
</ion-thumbnail>
<h2>Otto</h2>
</ion-item>
</ion-list>
<ion-list *ngSwitchCase="'kittens'">
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-kitten-1.jpg">
</ion-thumbnail>
<h2>Luna</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-kitten-3.jpg">
</ion-thumbnail>
<h2>Milo</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-kitten-4.jpg">
</ion-thumbnail>
<h2>Bandit</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-kitten-2.jpg">
</ion-thumbnail>
<h2>Nala</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-kitten-2.jpg">
</ion-thumbnail>
<h2>Nala</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-kitten-2.jpg">
</ion-thumbnail>
<h2>Nala</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-kitten-2.jpg">
</ion-thumbnail>
<h2>Nala</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-kitten-2.jpg">
</ion-thumbnail>
<h2>Nala</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-kitten-2.jpg">
</ion-thumbnail>
<h2>Nala</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-kitten-2.jpg">
</ion-thumbnail>
<h2>Nala</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-kitten-2.jpg">
</ion-thumbnail>
<h2>Nala</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-kitten-2.jpg">
</ion-thumbnail>
<h2>Nala</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-kitten-2.jpg">
</ion-thumbnail>
<h2>Nala</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-kitten-2.jpg">
</ion-thumbnail>
<h2>Nala</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-kitten-2.jpg">
</ion-thumbnail>
<h2>Nala</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-kitten-2.jpg">
</ion-thumbnail>
<h2>Nala</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-kitten-2.jpg">
</ion-thumbnail>
<h2>Nala</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-kitten-2.jpg">
</ion-thumbnail>
<h2>Nala</h2>
</ion-item>
</ion-list>
<ion-list *ngSwitchCase="'ducklings'">
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-duckling-1.jpg">
</ion-thumbnail>
<h2>Daffy</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-duckling-2.jpg">
</ion-thumbnail>
<h2>Huey</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-duckling-3.jpg">
</ion-thumbnail>
<h2>Dewey</h2>
</ion-item>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-duckling-4.jpg">
</ion-thumbnail>
<h2>Louie</h2>
</ion-item>
</ion-list>
</div>
</ion-content>