Jump to content
Search Community

Draggable + scrollLeft can get u stuck on fullscreen container

BuroCat 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

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.

Link to comment
Share on other sites

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.



Link to comment
Share on other sites

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.    

Link to comment
Share on other sites

  • 5 months later...

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

Link to comment
Share on other sites

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.

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...