Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
styke

Bounds on draggable scroll?

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

Hey, 

 

I'm initializing a draggable instance with the following parameters (simplified):

var drag = Draggable.create("main .hide-scrollbar", {
	type:"scroll", 
	throwProps:true,
	lockAxis: true,
	force3D: true, 
	edgeResistance : 0.3,
	dragResistance : 0.1,
	maxDuration : 0.5,
        //Nothing I put here works 
	bounds : { maxY: value },
	snap : {
		x  : function(){}
	},
	onThrowComplete : function(){}
});

As commented, none of the bounds I set are working. Why is this? I need to be able to control the scroll top min/max values because the inner content I'm dragging is of varying height, and I need to keep it fully within the screen at all times. 

 

The only way I've found of doing this otherwise is by explicitly setting the draggable element's height manually, however the app I'm building is for mobiles and the reflow is too expensive. 

Link to comment
Share on other sites

Hi, can you create a

See the Pen GwInx by bassta (@bassta) on CodePen

 to demonstrate the problem. Basically setting type to "scroll" creates new div and wrap it around the content of the target element. This new div uses the target element position/dimensions as bounds, so there is no need to explicitly set them. This is also why you should set your target element a height. Here is quote from the docs:

Or to make the element flick-scrollable, so that dragging it actually scrolls the content, make sure you've set the element's height (and/or width), and then do this:
​Draggable.create("#yourID", { type:"scroll",throwProps:true});

Also, make sure that you you the latest versions of Draggable and TweenLite/CSSPlugin or TweenMax. 

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