Jump to content
GreenSock

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

Draggable: accessing overscroll information

Recommended Posts

Hi,

 

I'd like to replicate a popular scrolling effect in mobile apps these day. When scrolling a list with a header image, overscrolling would cause the header image to grow in relation to your overscroll amount. I listened to the 'onDrag' event, and then query the 'y' property of the Draggable instance. It seems that the reported value does not take overscroll into account. 

 

I patched the Draggable source to enable this (detail below), but I am wondering, is there's a proper/native way of doing this?

 

 

This is my patch to Draggable.js:

//pass instance to scroll proxy object so we can dispatch event and append overscroll information
677-ish: ScrollProxy = function(instance, element, vars) {
//now when instantiating scrollProxy, pass reference to self
1824-ish: scrollProxy = this.scrollProxy = new ScrollProxy(self, target, ...
//line 752-ish right after if (offsetLeft || oldOffset) { .. }, append offset info and dispatch a new overscroll event
instance.offsetLeft = offsetLeft;
_dispatchEvent(instance,"overscroll","onOverscroll");
//line 785-ish right after if (offsetTop || oldOffset) { ... }, append offset info and dispatch a new overscroll event
instance.offsetTop = offsetTop;
_dispatchEvent(instance,"overscroll","onOverscroll");

So now in my onOverscroll handler I do something like:

var offset = myDraggableInstance[0].offsetTop;
var headerScale = 1 + ((offset / 120) * .5); //scale the header up to 1.5x when overscroll is between 0-120px

Thanks!

Link to comment
Share on other sites

Hi bonometric  :)

 

i`m a bit confused , but you can simply get current scroll top with this :

yourDraggable.scrollProxy.scrollTop();

Could you provide a live example of what you try to make !?

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.

×