How to determine if "html" or "body" scrolls a window

Question

The code below is used to find an element that can be scrolled (body or html) using 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 fine when the height of the document greater than the height of the window . However, when the height of the document same or less than the window , the method above will not work, because scrollTop() will always be 0. This becomes a problem if the DOM is updated and the height of the document grows after the height of the window after running the code.

Also, I usually don't wait for document.ready to configure my javascript handlers (this generally works). I could add a high div to the body temporarily to make the above method work, but this requires the document to be ready in IE (you cannot add the node element to the body element until the tag is closed), more on the topic document.ready "anti template " read this .

So, I would like to find a solution that finds a scrollable element, even if document is short. Any ideas?

Answer 1

About 5 years have passed since I asked about it ... but better late than never!

document.scrollingElement now part of the CSSOM specification, but at the moment, the browser implementation in the real world is practically not implemented (April 2015). However, you can still find the element ...

Using this polyfill from Mathias Bynens and Diego Perini .

What implements this basic solution from Diego Perini (the above polyfill is better and compatible with CSSOM, so you should probably use this.):

 /* * How to detect which element is the scrolling element in charge of scrolling the viewport: * * - in Quirks mode the scrolling element is the "body" * - in Standard mode the scrolling element is the "documentElement" * * webkit based browsers always use the "body" element, disrespectful of the specifications: * * http://dev.w3.org/csswg/cssom-view/#dom-element-scrolltop * * This feature detection helper allow cross-browser scroll operations on the viewport, * it will guess which element to use in each browser both in Quirk and Standard modes. * See how this can be used in a "smooth scroll to anchors references" example here: * * https://dl.dropboxusercontent.com/u/598365/scrollTo/scrollTo.html * * It is just a fix for possible differences between browsers versions (currently any Webkit). * In case the Webkit bug get fixed someday, it will just work if they follow the specs. Win ! * * Author: Diego Perini * Updated: 2014/09/18 * License: MIT * */ function getScrollingElement() { var d = document; return d.documentElement.scrollHeight > d.body.scrollHeight && d.compatMode.indexOf('CSS1') == 0 ? d.documentElement : d.body; } 

- getScrollingElement.js