document.body.scrollTop vs document.documentElement.scrollTop
source link: https://miketaylr.com/posts/2014/11/document-body-scrollTop.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
document.body.scrollTop vs document.documentElement.scrollTop
21 Nov 2014
Here’s a track from Web Compatibility’s Greatest Hits Album (Volume I) that just doesn’t want to go away—with the latest club remix titled “scrolling to sections from the menu in the mobile Google News site doesn’t work due to setting scrollTop
position on document.body
in Firefox for Android”.
Here’s some background for those with less refined musical tastes.
(Why yes I can do this bad metaphor stuff all day long, why do you ask?)
If you want to get or set the vertical scroll position of a document, you can use element.scrollTop
. According to the CSSOM View Module spec, if you’re in standards mode you need to operate on the document’s root element (the <html>
element—or document.documentElement
in DOM land). In quirks mode you would use the <body>
element, via document.body
.
This works in IE and Firefox and the late Presto Opera.
In Blink and WebKit browsers, it’s the exact opposite. Both have attempted to implement the standard (safari, chrome), but both have had to back out their patches due to sites breaking (some Google properties and webkit.org among them, as luck would have it).
The bug that was filed against WebKit for Facebook breaking as a result of changing to the standard is especially interesting because it shows the tension between following standards (and other browsers) and breaking sites for their own users.
It’s also a good example of how user-agent-string-based development can sometimes make it hard, if not impossible, to remove some of the crappier stuff from the web platform.
Here’s some excerpts, but the whole bug is a good read.
It really doesn’t matter how faithfully you implemented the spec. If it causes a major backward compatibility with the Web, we can’t have it.
Yes, the regression doesn’t reproduce if we fake the UA string as I mentioned in the comment #31.
Maybe sites will update one day and let other browsers do the right thing™. (Not that I’m holding my breath over here.)
Until then I guess we get to have fun writing stuff like this (found on apple.com a few weeks back):
(document.documentElement ||
document.body.parentNode ||
document.body).scrollTop;
Recommend
-
13
和专业有关系的第一门有趣的课结束了,觉得有必要记录些什么。这篇文章就用来纪念我觉得最有意义的一次作业。 需要分别编写MPI、Pthreads、OpenMP的并行实作。 我不愿意把代码重复三份,分别为三种并行库编写程式,所以就用 autotools 管理项目,...
-
16
How to Parse a JSON Request Body in Go Posted on: 21st October 2019 Filed under: ...
-
8
4 Aug 17How to manually set scrollTop during an iOS momentum bounceHere’s one to file under the mobile is web is awful.I’ve...
-
5
IOS上给body绑定click事件的bug 原创 ...
-
10
Use Ayurvedic Products to Find a Fit Body
-
5
AJAX body class html advertisements I have this AJAX function type: "GET",...
-
20
a new SF Classic — Vladimir Says Founder of Deepstash.com. I write about what I read. ...
-
13
63 members MEL Magazine A lifestyle and culture magazine, we cover sex, relationships, health, money, work and culture from a male point-of-view — even though we’re not all male....
-
8
Holotron presents a lower-body VR exoskeleton with full force feedback ...
-
4
performance Don’t attach tooltips to document.body Grow sales with Customer Journey Smarts with Here’s
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK