Draggable interrupts page scrolling on iOS

[Steve 0 Likes (Newbie)]

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

[GreenSock 8,117 Likes (Superhero)]

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)? 

[Steve 0 Likes (Newbie)]

Exactly! 

[GreenSock 8,117 Likes (Superhero)]

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. 

[Ahrengot 11 Likes (Newbie)]

Hey Steve,

 

This reply might come in too late, but I'm working on a similar challenge in my post http://forums.greensock.com/topic/8372-draggable-%E2%80%93-hold-to-drag/#entry32521 where there was posted one possible solution. 

 

edit: I came up with another solution for this problem. Click the link above to see it.

[midimid 0 Likes (Newbie)]

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

[Ahrengot 11 Likes (Newbie)]

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