Firefox, Google, ie about Document.body.scrollTop and document.documentElement.scrollTop with a value of 0

First, encounter the problem of Document.body.scrollTop value 0

When you do the page, you may use a fixed layer of position, read Document.body.scrollTop to set the position of the layer, like this,

window.onscroll=functionvar oid=document.getelementbyidx_x ("id"); oId.style.top =document.body.scrolltop+ "px";}

But how did not achieve the expected effect, the output document.body.scrollTop value a look, has been 0. It was a DTD problem, if the page directly with the beginning of the words will be no problem. But to conform to web standards, DTDs, of course, cannot be less. Use Document.documentElement.scrollTop instead of Document.body.scrollTop when using DTDs.

window.onscroll=function  () {   var oid=document.getelementbyidx_x ("id");   OId.style.top=document.documentelement.scrolltop+ "px";}

or use a function to solve:

functionGet_scrolltop_of_body () {varscrolltop; if(typeofWindow.pageyoffset! = ' undefined ') {//pageYOffset refers to the distance from the top of the scroll bar to the top of the pageScrollTop =Window.pageyoffset; } Else if(typeofDocument.compatmode! = ' undefined ' && document.compatmode! = ' Backcompat ') {scrolltop=Document.documentElement.scrollTop; } Else if(typeofDocument.body! = ' undefined ') {scrolltop=Document.body.scrollTop; }    returnscrolltop;}

Note: IE's rendering of box models is very different in standards mode and Quirks mode , and the interpretation of box models under standards mode is the same as other standard browsers, but in Quirks Mode is a big difference, and in the case of not declaring doctype, IE defaults to quirks mode. So for compatibility reasons, we may need to get the current document rendering method.

Document.compatmode comes in handy, it has two possible return values:backcompat and Css1compat, which are explained as follows:

Backcompat:standards-compliant mode is no switched on. (Quirks Mode)

Css1compat:standards-compliant mode is switched on. (Standards Mode)

In the actual project, we also need to get browse whether IE, so you can get IE rendering mode.

When a document has a standard declaration, the value of Document.compatmode is equal to "Css1compat", so we can determine whether the document has a standard declaration based on the value of Document.compatmode:

var height = document.compatmode== "Css1compat"? Document.documentElement.clientHeight:document.body.clientHeight;

Second, again encountered Google Browser does not support Document.documentElement.scrollTop, the value of 0 issues

Information display floating layer, IE, Firefox can display normal, but chrome under the floating layer will always appear on top, after careful analysis, found that Chrome's recognition of the DOCUMENT.DOCUMENTELEMENT.SCROLLTOP will appear error. However, after adding Document.body.scrollTop, the display is normal.
Since Document.documentElement.scrollTop and Document.body.scrollTop have only one return valid value in either standard mode or strange mode, there is no problem with it (the problem is that Chrome might treat the document as a non-standard Document to resolve it).
That is, to get the height of the use of document.documentelement.scrolltop+document.body.scrolltop, after testing, the code in IE, Firefox, chrome can show normal.

Third, browser compatibility mode

for Document.compatmode, many friends may be as little as I touch, knowing that his presence is unclear about his purpose. Today in ext see the use of Document.compatmode, feel this for us to develop compatibility of the Web page is still very helpful, we all know, ie to box model rendering in standards mode and quirks mode is a very big difference, The explanation of the box model under Standards mode is the same as other standard browsers, but in quirks mode there is a big difference, and in the case of not declaring doctype, IE defaults to quirks mode. So for compatibility reasons, we may need to get the current document rendering method. The
      Document.compatmode comes in handy, and it has two possible return values: Backcompat and Css1compat, which are interpreted as follows:
Backcompat standards-compliant mode is no switched on. (Quirks Mode)
Css1compat standards-compliant mode is switched on. (Standards Mode)
    in the actual project, we also need to get browse whether IE, so you can get IE rendering mode. Code in EXT: isborderbox=isie&&!isstrict.
When a document has a standard declaration, the value of Document.compatmode is equal to "Css1compat", so we can determine whether the document has a standard declaration based on the value of Document.compatmode
var height = document.compatmode== "Css1compat"? Document.documentElement.clientHeight:document.body.clientHeight;

========================== mode applies ===========================
Document.compatmode: Gets the rendering method that the current browser is using. The
is mainly the browser mode, there are two: Backcompat,css1compat. The former is a strange pattern, the latter is the standard mode.
IE default is Backcompat mode, Gecko kernel browser only in table in the picture layer, can be seen as Css1compat standard mode
Document.compatmode is equal to Backcompat, the width of the browser client area is document.body.clientWidth;
When Document.compatmode equals Css1compat, the browser client area width is document.documentElement.clientWidth.
The height of the browser client area, the height of the scrollbar, the left of the scroll bar, the top of the scroll bar, and so on are all the above cases.
A code that accurately obtains the width height of the page client area, the width of the scroll bar, the left and top of the scrollbar:

if (Document.compatmode = = \ "backcompat\") {cwidth = Document.body.clientwidth;cheight = Document.body.clientHeight; Swidth = Document.body.scrollwidth;sheight = Document.body.scrollheight;sleft = Document.body.scrollleft;stop = Document.body.scrollTop;} else {//document.compatmode = = \ "css1compat\" cwidth = Document.documentelement.clientwidth;cheight = Document.documentelement.clientheight;swidth = Document.documentelement.scrollwidth;sheight = Document.documentelement.scrollheight;sleft = Document.documentElement.scrollLeft = = 0? Document.body.scrollleft:document.documentelement.scrollleft;stop = Document.documentElement.scrollTop = = 0? Document.body.scrollTop:document.documentElement.scrollTop;}

http://blog.csdn.net/gongyuan303/article/details/8935307

Firefox, Google, ie about Document.body.scrollTop and document.documentElement.scrollTop with a value of 0