Jump to content
Search Community

Draggable interrupts page scrolling on iOS

Steve 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

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! :-)

 

 

Cheers,

 

Steve

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
		$(window).scrollTop($(window).scrollTop()-this.y);
	} 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

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