JLernDesign

Issue with Draggable allowNativeTouchScrolling

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?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Yeah I was thinking maybe it was an obvious fix that I just didn't know about, so a demo wasn't necessary. I'll put something together to illustrate the issue. Thanks @GreenSock

 

The example can be seen here if you scroll down to the "Our Solutions" section on a mobile device:

http://griflan.com/Clients/MobiPaid/

Share this post


Link to post
Share on other sites

Great, I look forward to the demo. It actually seems like you'd want allowNativeTouchScrolling:true. 

Share this post


Link to post
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. 

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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.