Jump to content
GreenSock

Pixouls

ScrollTrigger and Draggable with mixed horizontal/vertical scroll sections

Recommended Posts

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!

 

 

See the Pen YzWNrmx by Pixouls (@Pixouls) on CodePen

Link to comment
Share on other sites

Hey Pixouls and welcome to the GreenSock forums. 

 

Currently you have the draggable limited to the range of the horizontal section. I think that you should instead have it affect the entire scrollable area of the page. What I mean by that is remove the maxX on your Draggable.

 

Additionally you are not keeping the draggable in sync when the page is scrolled past the horizontal section so that is causing the jump. You'll need to add event listeners to the things that affect the scroll position post the horizontal section to keep things in sync. In the demo below I did so for the wheel event but you should also handle people dragging the scrollbar or using their keyboard to navigate.

See the Pen WNxRKae?editors=0010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Thanks for your reply and suggestions, Zach! Much appreciated.

 

Those changes have brought me very close to a solution. On touch devices, I am still having a few issues, however. Basically, if the Draggable section is part way in the viewport, and the user tries to grab it and scroll back up, Draggable events are firing and the user can't really scroll up normally. I messed around with a few options using the deltas and Draggable.enable()/disable(), but can't quite get it - basically I would need a way to disable Draggable if the user is scrolling vertically.

 

As a side note, I did have to remove the overwrite: 'auto' on the updateProxy function or else that will kill the inertia movements. And related to that, when inertia movements are still going and a touch user tries to grab the screen to stop, a bunch of flickering starts happening as the native scroll position and the inertia movements are fighting. I suppose this is where the overwrite would come in handy, but I would really like to have the inertia preserved if possible - do you happen to have any additional ideas on that?

 

Thank you again for your help!

Link to comment
Share on other sites

Unfortunately we don't have the capacity to make every edge case meet your needs. I would say the overwrite is pretty necessary to prevent the conflicts. Best of luck getting it working the way you need it to be working!

Link to comment
Share on other sites

Okay, thanks again for your help. Looking at this a bit more, I agree with you on the necessity of the overwrite because I'm not really seeing a way around that. I may end up going that direction.

Link to comment
Share on other sites

  • 7 months later...

Hi Pixouls, I've been fighting with the same issue the same way you were. I also tried using the draggable disable() enable() methods for enabling the horizontal swipe after a certain threshold to no avail. So now I'm wondering since it's been a few months. Have you figured it out somehow? Would you mind sharing the solution. Thanks in advance!

Link to comment
Share on other sites

  • 3 weeks later...

Hi Corvinius, sorry for the delayed response. Unfortunately, we had a few fringe device-specific issues we couldn't get around and dropped the draggability. Hope you have better luck!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×