When designing a page, you will often need to fix the location of the layer, so you need to get the coordinates of some HTML object to set the coordinates of the target layer more flexibly. In this case, you might use properties like document.body.scrolltop. But this attribute is 0 in XHTML standard web pages or, more simply, pages with tags. If you don’t use this tag, everything is fine. Of course there are ways – use document. documentElement instead of document. body.

var top = document .documentElement.scrollTop || document .body.scrollTop;
Copy the code

In javascript | | is a good thing, in addition to be used on the if condition such as judgment, can also be used in variable assignment. So this is the same thing as this. Such as:

var top = document .documentElement.scrollTop ? document.documentElement.scrollTop : document .body.scrollTop;
Copy the code

This way you can get good compatibility.

On the contrary, if the silent Ming, document. DocumentElement. ScrollTop can display instead of 0.

Each attribute is obtained as follows:

Page visible region wide: document. Body. ClientWidth; High page visible area: the document. The body. ClientHeight;

Page visible region wide: document. Body. OffsetWidth (including line width); High page visible area: the document. The body. OffsetHeight (including line width);

Page of text in full width: document. Body. ScrollWidth; High page of text in full: document. Body. ScrollHeight;

The page is rolled high: document.body.scrolltop; Left: document.body.scrollLeft;

Window. ScreenTop; ScreenLeft: window.screenleft;

High screen resolution: window.screen.height; Width of screen resolution: window.screen.width; Screen available workspace height: window. Screen. AvailHeight; Screen available workspace width: window.screen.availWidth;

ScrollHeight: Gets the scrolling height of the object. ScrollLeft: sets or gets the distance between the left edge of the object and the leftmost part of the currently visible content in the window scrollTop: sets or gets the distance between the top part of the object and the top part of the currently visible content in the window scrollWidth: gets the scrollWidth of the object

OffsetHeight: Gets the height of the object relative to the layout or the parent coordinate specified by the parent coordinate offsetLeft: Gets the computed left position of the object relative to the layout or the parent coordinate specified by the offsetParent attribute OffsetTop: Gets the computed top position of the object relative to the layout or parent coordinates specified by the offsetTop property

Event. clientX Horizontal coordinates relative to the document Event. clientY horizontal coordinates relative to the document Event. offsetX horizontal coordinates relative to the container Event. offsetY vertical coordinates relative to the container

Document. The documentElement. ScrollTop value of the vertical scroll event. ClientX + document. The documentElement. The scrollTop horizontal coordinate relative documents + the amount of vertical scrolling

To get the vertical position of the scroll bar on the current page, use:

document.documentElement.scrollTop;
Copy the code

Instead of:

document.body.scrollTop;
Copy the code

The documentElement corresponds to the HTML tag, and the body corresponds to the body tag.