1, the difference of scrolltop under each browser
IE6/7/8:
For pages that do not have DOCTYPE declarations, Document.body.scrollTop can be used to obtain scrolltop heights ;
For pages that have DOCTYPE declarations, you can use document.documentElement.scrollTop;
Safari:
Safari is special and has its own function of getting scrolltop: window.pageyoffset;
Firefox:
Firefox and so on relatively standard browser is more worry, directly with Document.documentElement.scrollTop;
2. Get scrolltop value
Perfect for getting scrolltop assignment phrases:
var scrolltop = Document.documentElement.scrollTop | | Window.pageyoffset | | Document.body.scrollTop;
The scrolltop value can be obtained in any case by this sentence assignment.
Look carefully at the assignment, what did you find out?
Yes, window.pageyoffset (Safari) is placed in | | In the middle position.
The system returns the last value by default when the number 0 is undefine or operation. 0 = = Undefine in even if operation;
When the page scroll bar is just at the top, the scrolltop value is 0 o'clock. The IE window.pageyoffset (Safari) returns to Undefine, when the Window.pageyoffset (Safari) is placed or the last side of the operation is returned, ScrollTop returns Undefine, Undefi NE used in the next operation will be an error.
Other browsers do not return undefine, regardless of the scrolltop assignment or the order of operations. Safe to use.
So the end is still ie problem. Cup with ...
Spirit a little trance, do not know if there is no clear expression.
But finally summed up this experiment is OK, we are relieved to use;
var scrolltop = Document.documentElement.scrollTop | | Window.pageyoffset | | Document.body.scrollTop;
DTD related instructions:
The page has a DTD, or when DOCTYPE is specified, use Document.documentelement.
The page does not have a DTD, or if DOCTYPE is not specified, use Document.body.
This is true both in IE and in Firefox.
For compatibility, you can use the following code, whether or not you have a DTD:
var scrolltop = Window.pageyoffset //for FF | | Document.documentElement.scrollTop | | Document.body.scrollTop | | 0;
DocumentElement and Body related instructions:
Body is the body child node in the DOM object, i.e. the <body> tag;
DocumentElement is the root node of the entire node tree, that is, the
Dom refers to each object in the hierarchy as a node, which is a hierarchy, you can understand a tree structure, like our directory, a root directory, the root directory has subdirectories, subdirectories and subdirectories.
Take HTML Hypertext Markup Language as an example: one root of the entire document is that you can use document.documentelement to access it in the DOM, which is the root node of the entire node tree. And the body is a child node, to access the body tag, in the script should write: Document.body.
Get scrolltop compatible with each browser, as well as body and documentelement
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
