I am constructing a site that has a div that bleeds 1100vh over the body width. I have it set to overflow:hidden, and upon vertical scroll, with the help of an interaction, it scrolls horizontally. Perfect.
This design works well with desktop users because of the nature of the mouse wheel; the directional flow isn’t impacting the UX.
HOWEVER, on touch devices, scrolling vertically scrolls vertically, and when it scrolls horizontally it’s really weird. It’s super non-intuitive and it impacts the site’s UX pretttttty badly.
I am following this clone: http://horizontal-scrolling-sticky-section.webflow.io/
Does anyone know of a solution that would allow me to horizontally scroll on mobile while still allowing the vertical container to scroll vertically?
If not I can use fullpage.js, but that just seems pretty unnecessary.
Simply, I want to be able to reach the section that scrolls horizontally on touch devices and I want to then be able to scroll horizontally. As I scroll horizontally I still want the vertical container (holding the 1100hv overflow) to scroll down.
If there’s a better way, please let me know.
Thanks!