Jump to content
Search Community

Issue with Draggable allowNativeTouchScrolling

JLernDesign test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have a draggable element and would like to keep the browser scroll locked while dragging this element. I've set the allowNativeTouchScrolling property to false, but now once I get to that part of the page, it renders the page unscrollable and gets stuck there only allowing my draggable object to move. Is there any way around this?

See the Pen XVmXbY by JLernDesign (@JLernDesign) on CodePen

Link to comment
Share on other sites

Any chance you could post a super simple demo? 

 

I wonder if you even need to set allowNativeTouchScrolling:false. That only really matters if you've got a draggable that's set to a type that's one direction, like type:"y" or "x". Have you tried setting it to true just to see if it solves your issue? Again, it's tough to troubleshoot blind so hopefully once we see a codepen demo or something, we'll be able to offer better advice. 

  • Like 1
Link to comment
Share on other sites

Ok so I've added a codepen that hopefully shows the situation better. 

 

The idea is that you scroll the page normally on your mobile device, but once you get to this section of  red boxes, you can swipe them back and forth without the browser scroll moving at the same time. 

 

So with allowNativeTouchScrolling set to true, as you swipe or drag those boxes the page scroll also moves up and down at the same time and I want to avoid that. 

 

If you set allowNativeTouchScrolling to false it locks the slides as you swipe them as I want, but it kills your ability to scroll the page at all past that spot. 

Link to comment
Share on other sites

Hm, allowNativeTouchScrolling:true seems to work perfectly. [scratches head]. It drags things side-to-side, but also allows scrolling vertically (natively). If your goal is to somehow sense the initial direction of the drag and if it's horizontal, lock native scrolling completely (until release), I don't see a great option for that right now. It's super tricky to do that kind of thing on all platforms due to the timing of when preventDefault() must be called on the event and how long it can take to accurately discern which direction the user is dragging. I think your best bet is probably to stick with allowNativeTouchScrolling:true (unless I'm misunderstanding your objectives). 

 

 

  • Like 1
Link to comment
Share on other sites

Thanks @GreenSock. Yeah I think the native scroll lock only on drag was what I had in mind but I had a feeling that might not be feasible. My client was taking issue with the fact that if you give it a swipe left/right, the page also moves vertically if you happen to move your finger upwards or downwards a tiny bit. Not a big deal to me, but worth investigating. Thanks!

  • Like 1
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.
×
×
  • Create New...