2

I'm building an app where I have images inside a ion-slides with indvidual ion-slide tags, when I'm swiping horizontally the scroll bar sometimes activates which moves the page and causes the user to have to re-adjust.

How can I lock the native scroll while the swipe is happening without it obstructing the use of the main scroll?

I realise I could probably hide the scrollbar while the event happens using something like ionSlideDrag Emitted when a slide moves. alongside ionSlideNextEnd and ionSlidePrevEnd But It this approach doesn't seem intuitive.

 <div class="image-container">
    <ion-slides>
      <ion-slide *ngFor="let slide of carDetails.imageUrls">
        <img [src]="slide">
      </ion-slide>
    </ion-slides>
  </div>

How can I essentially allow swiping while not allowing the scroll to occur?

li x
  • 3,953
  • 2
  • 31
  • 51

1 Answers1

0

Something that wasn't mentioned in the Ionic v3 Documentation for slides is the directive overflow-scroll="false" which can be used to stop the scroll from overflowing when moving.

If you want scrolling for everything to be disabled you can alternatively use the following on ionSlideDrag alongside a ionSlideNextEnd or ionSlidePrevEnd.

.no-scroll{
  overflow: hidden;
}
li x
  • 3,953
  • 2
  • 31
  • 51
  • Hey dude, would you be able to share a working example? I tried `overflow-scroll="false"` but it didn't work... – Jay Jan 05 '19 at 21:08
  • It seems like overflow-scroll has been replaced with scrollX and scrollY – li x Jan 06 '19 at 06:50