Horizontal scroll interactions?

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!

I’m pretty sure we can achieve what you’re going after. Can you please share with us a read-only link for your website so we can work with you to achieve that?