Ion Slides not starting at the top of slide

Ionic Framework ionic-v3
1

I am having an issue with <ion-slides>

I have the slides all set up correctly and working. Each of the slides is a different length (they represent news stories) so to combat this I have set

ngAfterViewInit() {
    this.slider.autoHeight = true;
  }

Now I can swipe through all the stories with no problems, however if you are at the bottom of one story and swipe to the next, you end up at the bottom of it instead of at the top
See demo (http://recordit.co/WMsKblA5BF)

image
WMsKblA5BF.gif374×666 1.45 MB

In order to try fix this I then added a scrollTop() for the new slide, but this will only fire after it’s loaded and means you have to watch the page scrolling up with is not a good user experience.

<ion-content>
  <ion-slides>
    <ion-slide>
       slide 1 content ... 
    </ion-slide>
  <ion-slide>
slide 2 content...
    </ion-slide>
  </ion-slides>
</ion-content>

From what I can see it’s the actual <ion-content> that’s being scrolled as opposed to the individual slides which is what causes this.

In order to get around it I have tried using <ion-scroll> for each of the <ion-slide> but this doesn’t appear to work either.

<ion-content>
  <ion-slides>
    <ion-slide>
       <ion-scroll scrollY="true>
       slide 1 content ... 
       </ion-scroll>
    </ion-slide>
  <ion-slide>
      <ion-scroll scrollY="true>
slide 2 content...
      </ion-scroll>
    </ion-slide>
  </ion-slides>
</ion-content>

Am I going about this completely the wrong way or has anyone else been able to get this working?

I’m using Ionic 3.4.2

2

My work around for now has to be include <ion-scroll> in each of the slides. So that the user is scrolling the <ion-scroll> element instead of the whole <ion-slide>

<ion-slides>
<ion-slide>
<ion-scroll scrollY="true">
Long content here...
</ion-scroll>
</ion-slide>
</ion-slides>

Open to suggestions if there’s a better way of doing it

3

Facing exactly same issue .Any solutions or workarounds .
Tried ion-scroll hack but its not working.

5

Can try this method : Scroll to top in ionic

6

Did you stick with your workaround or was this solved in another way?

1 Like