PDA

View Full Version : ScrollTo enhancement: Scrolling relative to "bottom" and "right"



Animal
2 Apr 2007, 5:27 AM
As requested by some posters, and extension of the scrollTo functionality to match scrollBy. So now, to animate to the end, rather than calculating the scrollTop yourself, you can do:



myElement.scrollTo("b", 0, true)


The new code:



/**
* Scrolls this element to the specified pixel position from the specified edge.
* @param {String} edge: "left"/"l", or "right"/"r", or "top"/"t", or "bottom"/"b"
* @param {Number} position The new scroll value from the specified edge.
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
* @return {Element} this
*/
scrollTo : function(edge, position, animate){
var edge = edge.toLowerCase();
var scrollMax, prop;
switch (edge) {
case "l":
case "left":
scrollMax = this.dom.scrollWidth - this.dom.clientWidth;
prop = "scrollLeft";
break;
case "r":
case "right":
scrollMax = this.dom.scrollWidth - this.dom.clientWidth;
prop = "scrollLeft";
position = this.dom.scrollWidth - (position + this.dom.clientWidth);
break;
case "t":
case "top":
scrollMax = this.dom.scrollHeight - this.dom.clientHeight;
prop = "scrollTop";
break;
case "b":
case "bottom":
prop = "scrollTop";
position = this.dom.scrollHeight - (position + this.dom.clientHeight);
break;
}
if (position < 0) position = 0; else if (position > scrollMax) position = scrollMax;
if(!animate || !A){
this.dom[prop] = position;
}else{
var to = prop == "scrollLeft" ? [position, this.dom.scrollTop] : [this.dom.scrollLeft, position];
this.anim({scroll: {"to": to}}, this.preanim(arguments, 2), 'scroll');
}
return this;
};


Can we add this to the main branch?

Animal
2 Apr 2007, 5:41 AM
'cept the animation doesn't work, but I haven't got into animation yet...

jack.slocum
2 Apr 2007, 6:06 AM
It looks like a lot of code duplication. I will refactor it into an internal function (restrictScroll) that can be shared by both.

JeffHowden
7 Oct 2007, 2:19 PM
It doesn't look like this made it in, even by a different name. Additionally, I noticed some oddity when trying to incrementally scroll an element to a position and have animation enabled. Instead of moving from its current scroll position to the new one (in my case, the bottom), it jumps to the top and then scrolls to the bottom. If I toggle animation off, it seems to work correctly. The cause is the scroll animation is passed a starting value of 0 everytime instead of determining the scroll coordinates beforehand.

JeffHowden
7 Oct 2007, 9:46 PM
What's more, Element really needs a scrollBy() method because sometimes the amount of scroll to apply is relative to the current scroll position and not an absolute value, similar to the DOM's built-in scrollBy() method:

http://msdn2.microsoft.com/en-us/library/ms536728.aspx
http://developer.mozilla.org/en/docs/DOM:window.scrollBy

In fact, reading the docs on scrolling at developer.mozilla.org, an Ext equivalent of scrollByPages() and scrollByLines().

JeffHowden
4 Nov 2007, 2:49 PM
bump

KimH
11 Nov 2007, 3:49 AM
+1 :)