Disable vertical scrolling when swiping on mobile

[ja1shan]

Firstly, thank you for this Vue Componoent. It is working perfectly apart from one little issue I have.

When using it on a mobile device and swiping on the slider it can scroll the page up and down. Is there any way to prevent vertical scrolling on mobile when swiping left and right on the slider.

I tried to add e.preventDefault() on the onDrag function when (Math.abs(newOffsetX) > 5) with no luck.

Thanks

[quinnlangille]

Hey @ja1shan, just to confirm this is because the content of your slide is taller than the carousel? Can you send a fiddle or screen capture of this happening so we can properly diagnose?

[ja1shan]

I'm not sure but my Carousel and Slider seems to be the same size. Here is an example https://jsfiddle.net/gvzn6mt3/5/

[quinnlangille]

Oh, I think I misunderstood. You want to disable vertical scrolling on the entire page when you're on mobile? This isn't related to the carousel, but you can probably use overflow: hidden or position: fixed. There's a pretty good thread on that here -> https://css-tricks.com/forums/topic/prevent-body-scrolling-when-the-user-scrolls-on-fixed-position-div/

[ja1shan]

I only wanted to disable the scrolling when the user is swiping (through the carousel slides), not entirely. I did try use e.preventDefault() earlier with no luck.

It is fine, I will look into another solution.

An example would be https://surmon-china.github.io/vue-awesome-swiper/ When swiping the Carousel on mobile (you can't scroll up and down by swiping up and down).

[koraykupe]

I am also looking for a solution for it. There are several ways to do it. I am trying to find the most basic one.

[quinnlangille]

@koraykupe feel free to share if you end up implementing something on your end!

[koraykupe]

Sorry, I switched to another plugin.

[mateo2181]

@koraykupe I've tried to do it but I did't find a solution. Could you share what plugin you're using?

[notnotgabriel]

I'm facing the same issue here ⚠️ I applied the following solution to solve:

<carousel
    @touchstart.native="onTouchStart"
    @touchend.native="onTouchEnd"
  >
</carousel>


onTouchStart() {
  document.querySelector('body').style.overflow = 'hidden';
},
onTouchEnd() {
  document.querySelector('body').style.overflow = 'auto';
},

[simonmaass]

i have the same problem... @notnotgabriel somehow this doesnt work for me... :(

[StanZhuravlev]

I have a same issue. The advise of @notnotgabriel - not working :(

Can this issue include to roadmap?

[simonmaass]

Yeah that would be awesome - with "mobile-first" approaches in most ux discussions nowadays that would be a great feature!

[AleitaT]

Did anyone try adding touch-action: pan-x !important; to .VueCarousel-slide class? This should limit pan-y. Worked for me. It doesn't cure all bounce frustrations but solved this issue for me.

[mwager]

@AleitaT problem is you cannot scroll at all then :) but should be good to go for now...

plugin support would be nice tho, similar to prop "prevent-y-scroll" from vueperslides: https://antoniandre.github.io/vueper-slides

[keelviinn]

I used "touch-pan-y" in the tailwind and it worked fine.