Scrolling with vertical draggable

[TRIPLESENSE REPLY]

Hi all,

I'm attempting to create a vertical draggable with for a "fashionable" effect, an everything works as expected on Android, but not on iOS.

On Android, the page doesn't scroll when I swipe up on the draggable, and scrolls only when I tap outside of it.

On iOS, bot IPhone and iPad, looks like the page has a priority on the draggable (or the swipe event "bubbles" from the draggable), thus the draggable stays almost in the same position, and the page scrolls.

In this pen, the gray draggable scrolls into the black box, and overflows it for a maximum of half of the draggable height.

How can I get the same behavior on the platforms?

Thanks in advance!

(It's better to test the pen in full page mode:

See the Pen qYbpOL by massic80 (@massic80) on CodePen

See the Pen qYbpOL by massic80 (@massic80) on CodePen

[Sahil]

You are using really old versions of Draggable and TweenMax. I don't have Apple devices to test it but check following demo with latest versions, it should work as this problem hasn't reported by anyone else.

 

See the Pen jxqyQW by Sahil89 (@Sahil89) on CodePen

 

To get latest files for your codepen demos, use following link for free to use files and codepen demo for club plugins,

 

https://cdnjs.com/libraries/gsap

 

See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen

 

[TRIPLESENSE REPLY]

Hi @Sahil,
I'm astonished, since I didn't expect latest versions from the CDN to be that old

https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js
there must be a problem in cdnjs configuration, @GreenSock

However, your pen doesn't work as well: I created that one by adapting a pen from another forum post, but I'm using the latest version in my local environment.

Thanks for the notification!
I also updated my pen, also adding ThrowProps from the links you reported.

[GreenSock]

If you don't want the user to be able to native touch-scroll, simply set this on your Draggable: 

 

allowNativeTouchScrolling: false

 

And yeah, it's really annoying that CDNJS stopped supporting the whole "/latest/" thing years ago. We begged them not to, but to no avail. They absolutely refuse to, so that "/latest/" stuff is actually a few years old. Sorry about any confusion there. 

[TRIPLESENSE REPLY]

Thanks @GreenSock

no problem for the "latest" trouble

As of allowNativeTouchScrolling, I considered the option and probably also tested it (I don't remember and now I can't test easily since I'm from a mobile), but isn't it meant for scrolling on draggable's perpendicular direction?

[GreenSock]

45 minutes ago, TRIPLESENSE REPLY said:

As of allowNativeTouchScrolling, I considered the option and probably also tested it (I don't remember and now I can't test easily since I'm from a mobile), but isn't it meant for scrolling on draggable's perpendicular direction?

 

No, it doesn't matter which direction. 

 

Please let me know if the allowNativeTouchScrolling:false solves things for you. Thanks!

[TRIPLESENSE REPLY]

Hi again!
Looks like that allowNativeTouchScrolling:false solves the trouble!
Sorry for the misunderstanding: I was somehow confused by documentation:

Quote

allowNativeTouchScrolling:  Boolean - by default, allows you to native touch-scroll in the opposite direction as Draggables that are limited to one axis . For example, a Draggable of type : " x " or " left " would permit native touch-scrolling in the vertical direction , and type : " y " or " top " would permit native horizontal touch-scrolling.

 

Thanks again, have a nice day

Massi