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.
- Previous: Making Sense of Sample Standard Deviation
- Next: Ten Years