search

vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.88k stars 6.97k forks source link

[Feature Request] Disable window scrolling while swiping horizontally on tab in phone #11170

Open billsliu opened 4 years ago

billsliu commented 4 years ago

Problem to solve

The window scrolling up or down when you swiping horizontally in tab. https://vuetifyjs.com/en/components/tabs/#tab-items The whole page is scrolling up or down when I am swiping horizontally on tab. Open www.amazon.com, swiping Amazon's menu item, Amazon's menu only move horizontally buy not vertically at the same time.

Proposed solution

Disable window scrolling while swiping horizontally, the same issue is discuss in other open source project. https://github.com/akiran/react-slick/issues/1240

RobbinBaauw commented 4 years ago

For me it works: vuetify-11170 Could you maybe add a video, browser, OS & vuetify version?

billsliu commented 4 years ago

You can duplicate the up or down movement by clicking the Tab THREE for example, you swipe this tab up and down inside the blue tab Three area, it can move the page up and down, this behavior should be disabled because when the user swipe the tab horizontally, they probably also has the slightly up or down gesture at the same time, this will cause the page unintentionally move up or down. I noticed this problem when I use vuetifyjs tabs. I tested Amazon's main page, it contains the tabs, it will have no up or down movement when I swipe the tabs, Amazon's tab is much stable when I swipe in the phone. The same issue is discuss in other open source project. akiran/react-slick#1240

The unintentional up or down behavior is very easy to duplicate in the phone, because your hand is much bigger than the mouse. To duplicate this problem by try to use your hand to swipe the blue area of the tabs not the white tab content.

To solve this problem only need to disable the vertical swipe in the blue area of the tab in your post image, don't disable the vertical swipe in the tab content area.

RobbinBaauw commented 4 years ago

Okay I was able to reproduce it. When scrolling horizontally on the tab headers it is possible to scroll vertically (though if you only slightly scroll vertically) it won't do anything. I am not sure if blocking vertical scroll should be the default behavior though.

billsliu commented 4 years ago

I feel the Amazon's tab is much user friendly since it has no unintentionally vertical movement, the unintentionally vertical movement of vuetifyjs tab is very common on the phone, the user still can use the tab even with the vertical movement, but a little bit annoy.

gbikas commented 4 years ago

I can confirm that this is happening on iOS devices. I found a solution that fixes this slight vertical scroll. Add the following to your css:

.v-tabs { -ms-touch-action: pan-y; touch-action: pan-y; }