Jump to content


Draggable interrupts page scrolling on iOS

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

Sorry if this has come up before.  I did have a search, but wasn't sure how best to describe it.


Anyway, I have a long HTML page which scrolls vertically.  Nothing unusual about that...


On this page, I have banners which are horizontally draggable, using Draggable.



However, when I scroll vertically on iOS, if I drag within the Draggable banners, it stops the page scrolling.


I want the Draggable banners to scroll horizontally, and the page to scroll vertically.


How might I work around this?  Is it even possible with iOS?



Loving your work as always! :-)






Link to comment
Share on other sites

Just so I understand your question correctly....


Are you saying you want to press your finger down on a banner and then when you drag up and down, it scrolls the page vertically, but when you drag left and right, it just moves the banner (not the page)? 

Link to comment
Share on other sites

Unfortunately, no, that'd be a pretty complex thing to tackle. You'd have to dissect every "touchmove" event and split apart the x and y deltas and have on affect Draggable and the other change the scrollTop of the window. You could take a crack at it if you'd like using an onDrag handler on the Draggable. But that's not something that's officially supported. 

Link to comment
Share on other sites

  • 1 month later...
  • 2 months later...

Just ran into this problem and here's what I did.


1) set my draggable to x,y with lockAxis: true.

2) onDrag function looks like this:


onDrag: function(evt) {
	if (this.y !=0 && this.x == 0) {
                // user is moving vertically
	} else {
		// do your usual horizontal stuff

I'm basically using a draggable to scroll the webpage vertically, which is definitely a no-no, but it seems to perform OK and my particular page (a slideshow) is simple enough where it doesn't appear to be a problem.


I tried messing around with disabling the draggable when the user scrolls vertically, but that requires the user to "retouch" a second time in order to move the page vertically, and there's no good way to detect when the interaction is complete and re-enable the draggable. i.e., once the user has touched the draggable, all interactivity is locked to greensock's JS - there's no way to pass that touch back to the browser natively (for instance, like "un"-preventing default).

Link to comment
Share on other sites

Interresting solution midimid. Do you have a link to the page where you're doing this?

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.