Skip to main content

Web compatibility story of scrollTop and scrollLeft

How do you account for scroll position on the Web? You use document.body.scrollTop/scrollLeft on WebKit/Blink and document.documentElement.scrollTop/scrollLeft on non-WebKit/non-Blink browsers.

A couple of months ago, one WebKit contributor tired to fix this discrepancy between browsers by flipping WebKit's behavior to match other browsers in r154614. This, of course, broke a bunch of websites including Facebook that did UA string sniffing. In particular, if you clicked on an image after scrolling on the News Feed page on Facebook, the scroll position reset to the top of the page.

While I was initially considering to roll out the whole patch, I realized that we could make scrollLeft and scrollTop of both body and documentElement return the scrolled positions of the viewport. So I landed a partial revert of the original patch in r158254 to preserve the old behavior in HTMLBodyElement.

While I was uploading the patch, I told another WebKit contributor that my partial rollout would break any websites that takes the advantage of the fact scrollTop and scrollLeft on body and documentElement are currently mutually exclusive. e.g.

var scrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft;

As it turns out, I immediately found such code on Facebook along with at least 17,527 results on github.