How to disable vertical scrolling while swiping ion-slide

Question

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?

Answer 1

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;
}