Jump to content
Search Community

Scrolling with vertical draggable

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

Link to comment
Share on other sites

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,




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


  • Like 2
Link to comment
Share on other sites

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

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.

Link to comment
Share on other sites

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. 

  • Like 3
Link to comment
Share on other sites

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!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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

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


  • Like 1
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...