search

baianat / hooper

🎠 A customizable accessible carousel slider optimized for Vue
https://baianat.github.io/hooper/
MIT License
720 stars 131 forks source link

Vertical slider on Mobile, while swiping, window scroll should not trigger, #187

Open atulr-grazitti opened 4 years ago

atulr-grazitti commented 4 years ago

When you are using the vertical slider and try to swipe on a touch device it's scrolling the window as well, and ideally, when you are swiping the slider its should not scroll the window.

I am not able to find or think the perfect solution for it, but I have used a simple trick to get this solve, Although I am sure better solution can be found.

So What I have done, For a touch device on touch-start and touch-move events I have made body's overflow hidden and on touch-end I have made it auto again, So by this, my problem gets solved, but it would be nice if Hooper handles this.

wuori commented 4 years ago

I've solved this before using @touchstart.prevent="" on the wrapper containing Hooper. This isn't perfect on mobile though (can prevent user from scrolling further down ) so I'm still working on it.

frizurd commented 1 year ago

I've solved this before using @touchstart.prevent="" on the wrapper containing Hooper. This isn't perfect on mobile though (can prevent user from scrolling further down ) so I'm still working on it.

Did you find a solution?

frizurd commented 1 year ago

Update: I applied the following CSS to the div that contains the hooper element

touch-action: pan-y;

This only allows vertical swiping on the element. But horizontal swiping still works because of the hooper code :)

Let me know if it also works for you guys