Draggable + scrollLeft can get u stuck on fullscreen container

[BuroCat]

Hi, I am developing a little website using the draggable component which is awesome. The only issue I have with it is that if the screen (like ipad and phone devices ) is very small and the scrolling container is bigger then the viewport you will get stuck on the draggable component. The reason for that is that a swipeup or mouse move up|down seems to be disabled when you use the scrollLeft type. Is there a way to fix this ?? Try it out on the demo, set the draggable instance to scrollLeft and make your screen the size of the text window and try to get out of this view using the mouse click + hold + up|down.   its not possible right now. Please help. I am a green sock member and a huge fan.

[Jonathan]

Hello BuroCat, and Welcome to the GreenSock Forums!

 

If possible can you provide a limited

See the Pen by pen (@pen) on CodePen.

or jsfiddle example, so we can better help you with what your experiencing in a live editable environment.

 

what phone devices (model and version) do you see this on?

 

Thanks!

[Carl]

Hi, I tried re-creating the scenario you described on an iphone4s and a iPad mini retina (at the store) In both scenarios where I made the Draggable object expand (by zomming in) beyond the whole screen I could still pinch to zoom out and regain scrolling of the page that contained the Draggable.

 

Admittedly it was a little awkward, but if the Draggable takes up the entire screen, I'm really not sure what we can do in the API to "sometimes intercept the intereaction with the Draggable and initiate a page scroll". Perhaps I'm not understanding the whole issue.

 

On desktop, i'm not really sure what "mouse click + hold + up|down" exactly means.

 

We'd love to look into this further but perhaps a more concrete and easy to simulate example (like Jonathan) suggested is in order.

 

-c

[BuroCat]

You can actually try it as we have just launched the website.  http://bondistaycations.com.au . It would be great if we could find a solution for it, for now I have added overlays on the left and right (ipad) of the draggable component to scroll out of it.

 

We where thinking if you have a scrollLeft type of the draggable component give it an additional option to allow vertical scrolling. You could track the y touch movement (touchstart-move) and if its more then 20 - 50 px don't prevent default behaviour.

 

Its friday in Australia, so a merry xmas to the team and thx for looking into it.    

[jamiejefferson]

Hmm two finger scrolling still works fine on top of the Draggable; maybe put a note there like you have for mouse users?

[BuroCat]

We have gotten another project which uses the same sort of thing and our clients bring this up and up again. I tried to disable the draggable if the pageY position changes by more than 50 px (onDragStart/onDrag), but disabling the component does not unlock the default scrolling behavior. There must be a way to get this sorted, I can't believe that I am the only one with this issue.

 

Cheers Thomas

[BuroCat]

It would be great if someone from the staff could look into the issue, or at least make a comment that this is absolutely expected behavior. 2 finger swipe is not an option! I am thinking about binning the draggable component and only use the throw props plugin to add to the swiping. Thats maybe the way to go.

[GreenSock]

The challenge is that in order to prevent native scrolling behavior, preventDefault() must be called on the very first touch event. I'm not sure of any way around this, but I'll try to brainstorm some more. If you know of a way, I'm all ears.