Hello all,
I've recently been working a site that is going to function with a mix of horizontal scroll sections setup with ScrollTrigger, and then other sections with regular vertical scroll. To allow for horizontal swiping on touch devices, I've also integrated Draggable in a similar method as as outlined in the thread linked below. ("horizontal scroll trigger -- tablet / mobile")
However, I've run into one major issue on touch devices. After hitting the end of the horizontal scrolling section, the user sees that the screen starts to scroll vertically. At this point, if the user starts vertical scroll on the draggable area starts fighting with Draggable. Additionally, if the user gets past that and into the normal, vertically scrolled content below, the user will have a hard time scrolling back up if they swipe on the section that is setup with Draggable.
Basically, the transition between Draggable/horizontal scroll and normal, vertical scroll is the crux of the issue here - and they will fight each other at the transition point. On desktop you can see this somewhat by dragging past the first section, getting toward the end of the first section, then scrolling down a bit. If you drag on the top section while still visible, it will "jump" you back up to previous scroll position - I believe something like that is causing a conflict worse than a jump on a touchscreen.
Does anyone have any ideas on how to make these two play together better?
I've also tried having the browser watch the ScrollTrigger position and run disable()/enable() on Draggable but that somewhat locks the user out of the vertical scrolling section if they are swiping slowly and without enough throw/momentum for them to see the content below.
Thank you!