Calculation of various positions and heights:. Position (),. offset (),. outerheight (),. scrolltop,. scrollheight,. clientheight

1. Position () and. offset ()

Jquery. position () gets the offset from the parent element whose position is relative or absolute, and returns. position (). left and. position (). top, not counted from its own margin-left;

Jquery. offset () gets the offset relative to the upper-left corner of the view, and returns. offset (). left and. offset (). top, calculate your own margin-left, and you can also set it. offset ({left:, top:}); this is very useful. For example, when writing a date control, you can use it according to the input. offset () sets the date control. offset ().

Jquery's. offset () is the same as JS's obj. offsetleft and. obj. offsettop, but this value cannot be assigned.

2. outerheight (),. innerheight (), and. Height ()

Jquery's. outerheight () = border + padding + height, equivalent to. offsetheight (. offsetwidth) of Js)

. Outerheight (true) = margin + border + padding + height

. Innerheight () = Padding + height

. Height () sets and obtains the height.

3. scrolltop and. scrollheight

. Scrolltop: the scroll height;
. Scrollheight: the height of the entire rolling, from the start to the end of the rolling, including the height of the rolling element.

For example, contentcontainer is the parent element and content is its child element. The height of the child element is higher than that of the parent element, so the parent element has a scroll bar.

Assume that the slide bar has crossed a distance,

Then, contentcontainer's scrolltop is a and scrollheight is B.

4. Listen for Rolling events on the entire web page:

Test ie11, chorme, and Firefox. It is found that the body does not support listening to scroll events of the entire web page. Windows supports window. onscroll = function (){};

5. Get/set the scroll height of the webpage:

Chrome	Document.doc umentelement. scrolltop is invalid. 0, Document. Body. scrolltop is valid and equivalent to $ ('body'). scrolltop () + ',' + $ (document). scrolltop ()
Safari and chrome have the same performance
Ie11 (including its simulation of the IE10-7)	Document.doc umentelement. scrolltop is valid and equivalent to $ (document). scrolltop, Invalid document. Body. scrolltop is 0, $ ('body'). scrolltop () is invalid
Firefox	Document.doc umentelement. scrolltop is valid and equivalent to $ (document). scrolltop, Invalid document. Body. scrolltop is 0, $ ('body'). scrolltop () is invalid

 

So when you get the page's scroll Height: math.max(document.doc umentelement. scrolltop, document. Body. scrolltop) or $ (document). scrolltop ()
You can assign values to scrolltop of jquery and Js.
Therefore, if you want to set 'back to the top ', the effect should be:

$ ('# Totop'). Click (function () {document. Body. scrolltop? Document. Body. scrolltop = 0: document.doc umentelement. scrolltop = 0; // or $ (document). scrolltop (0 );})

In addition, to test the same page, scroll the page to the end with the mouse wheel. ie11 and chrome only trigger twice, probably from scrolltop 166 to 230, while Firefox triggers 15 times, it seems that ie11 and chrome have optimized the triggering of rolling events. You can manually add the following code to determine the number of pixels between two scrolling times before the onscroll function can be run:

var stop=Math.max(document.documentElement.scrollTop,document.body.scrollTop);window.onscroll=function(){    if(Math.max(document.documentElement.scrollTop,document.body.scrollTop)-stop>100)　　　　{//do something}}

6. Get the height of the body viewport:

Yes <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">:

Chrome	Document.doc umentelement. clientheight is valid, window. innerheigh is valid, Invalid document. Body. clientheight is equivalent to $ ('body'). Height ().
Ie11 (including its simulation of the IE10-9)	Document.doc umentelement. clientheight is valid, window. innerheigh is valid, Invalid document. Body. clientheight is equivalent to $ ('body'). Height,
Simulate IE8 and IE7 with ie11	Window. innerheight is undefined, others are the same
Firefox	Document.doc umentelement. clientheight is valid, window. innerheigh is valid, Invalid document. Body. clientheight is equivalent to $ ('body'). Height ().

None <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">:
Chrome: document.doc umentelement. clientheight is invalid. It is equivalent to $ ('body'). outerheight (true). Window. innerheigh is valid, document. Body. clientheight is valid, even if there is <! The same is true for doctype>.
Ie11: document.doc umentelement. valid for clientheight, document. body. clientheight is valid (IE7, 8, 9: Invalid and $ ('body '). outerheight (true) equivalent), window. valid for innerheigh (when ie11 is used to simulate IE8 or IE7, window. innerheight is undefined), even if there is <! The same is true for doctype>.

Therefore, the guarantee is complete. <! The height of the obtained body is document.doc umentelement. clientheight;

7. judge that the scroll bar of the DIV is rolled to the bottom.

You only need to determine the distance between the DIV and scrolltop + its own height offsetheight> the scrollheight of the Div indicates that the DIV is rolled to the end.
For example, a div with ID = 'contentcontainer' contains a subdiv with a height of self-check ID = 'content.

As long

Document. getelementbyid ('contentiner iner '). onscroll = function () {If (this. scrolltop + this. offsetheight> = This. scrollheight) {$ (this ). append ('bottom '); // do not use = because many Browsers Do not trigger scroll events every 1 px scrolling }}

Run code

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = UTF-8 "/> <title> example </title> </pead> <body> <Div id = 'show'> </div> <Div id = 'contentiner iner' style = "margin: 10px 0 0 10px; overflow: auto; padding: 30px; Height: 300px; width: 80%; Border: 2px solid black; "> <Div id = 'content' style =" margin: 10px 0 0 10px; padding: 10px; Height: 700px; width: 80px; Border: 1px solid black; "> </div> <SCRIPT type =" text/JavaScript "> document. getelementbyid ('contentiner iner '). onscroll = function () {If (this. scrolltop + this. offsetheight> = This. scrollheight) document. getelementbyid ('show '). innerhtml = document. getelementbyid ('show '). innerhtml + 'tobottom, ';}</SCRIPT> </body> </ptml>

8. Scroll the judgment body to the bottom:
Obtain the scrollheight: document.doc umentelement. scrollheight of the page, which is consistent in different browsers.
Scroll to the bottom of the listening page:

window.onscroll=function(){        var scrolltop=Math.max(document.documentElement.scrollTop,document.body.scrollTop);         if(scrolltop+document.documentElement.clientHeight>=document.documentElement.scrollHeight)        alert( ‘nowbottom‘ );};

 

Calculation of various positions and heights:. Position (),. offset (),. outerheight (),. scrolltop,. scrollheight,. clientheight