The code below is used to find the element that can be scrolled (body or html) via javascript.
var scrollElement = (function (tags) {
var el, $el, init;
// iterate through the tags...
while (el = tags.pop()) {
$el = $(el);
// if the scrollTop value is already > 0 then this element will work
if ( $el.scrollTop() > 0){
return $el;
}
// if scrollTop is 0 try to scroll.
else if($el.scrollTop( 1 ).scrollTop() > 0) {
// if that worked reset the scroll top and return the element
return $el.scrollTop(0);
}
}
return $();
} (["html", "body"]));
// do stuff with scrollElement...like:
// scrollElement.animate({"scrollTop":target.offset().top},1000);
This code works perfectly when the height of the document
is greater than the height of the window
. However, when the height of the document
is the same or less than the window
the method above will not work because scrollTop()
will always be equal to 0. This becomes a problem if the DOM is updated and the height of the document
grows beyond the height of the window
after the code runs.
Also, I generally don't wait until document.ready to set up my javascript handlers (this generally works). I could append a tall div to the body
temporarily to force the method above to work BUT that would required the document to be ready in IE (you can't add a node to the body element before the tag is closed). For more on the document.ready "anti-pattern" topic read this.
So, I'd love to find a solution that finds the scrollable element even when the document
is short. Any ideas?