Search the Community
Showing results for tags 'overscroll'.
Found 1 result
-
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!
