hooper
hooper copied to clipboard
baianat
Prevent vertical scroll due left/right swipe on touchable devices
When I swipe slides left/right on mobile phone, the screen a few scroll up and down. It's non comfort and bad usability.
I have a research of this question, and saw a different solution of this issue.
- (bad) In tochmove/touchstart/touchend callbacks make a css style overflow-y: hidden. It's make left/right scroll clean, but when I need scroll page up/down - the slider component ignore my touch. It's bad, because if I orient phone to landscape, and hooper fill all screen - I lose possibility scroll page :( For example, see this.
- (good) The best usability was on vuw-awesome-swiper (based on swiper4 library). In this case, I have a fixed vertical position, when swipe left/right, but I have possiblity scroll page up/down when make on swiper verticals taps.
Can you add support of scrolling like as swiper4 library? Very please. :)
Up. This would be a killer feature usability wise. On iPhones the unwanted verticale scroll is even worse. Maybe a workaround Is possible using the hooks provided by the component? Need to test it
Any ideas how I can fix it?
the only solution i have in mind is, when touch event starts, grab the body and lock overflow-y, when it stops reactivate it
I founded simple fix, just add @touchstart.prevent="" on slider wrapper
inside "" goes nothing?
I founded simple fix, just add @touchstart.prevent="" on slider wrapper
inside "" goes nothing?
Yep or you can add any function
I founded simple fix, just add @touchstart.prevent="" on slider wrapper
inside "" goes nothing?
Yep or you can add any function
Nice hack but, sadly, it doesn’t allow vertical page scrolling on mobile which is not optimal
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