The scorching sun, the second half of the senior. Now, like the weather, I have a high passion for programming. Have a strong desire for knowledge.
First of all, I made a very small program, that is, scroll to the right wheel, fixed p inside the number will be +1.
<! DOCTYPEHTML> <HTML> < Headlang="en"> <Metacharset="UTF-8"> <title></title> <Scriptsrc="Jquery-1.8.3/jquery.js"></Script> <style> body{height:2000px; }#p1{position:fixed; Left:10px; top:100px; } </style> </ Head> < Body> <Pid="P1"></P> <Script> $ (function(){varp = $ ("P"); Varx= 0; $(window). Scroll (function() {P.text (x++);Console. log (1); }) </Script> </ Body> </HTML>
2. Understand the Clientheight/clienttop and Scrolltop/scrollheight
ClientTop (visual height): Width of the top border of the box
Clientheight:height + padding-top + padding-bottom
ScrollTop: Scroll distance of roller
ScrollHeight (Chinese can be understood as the height of scrolling): The scroll bar can be scrolled part + border height plus the horizontal scroll bar is not available height, compared with clientheight, multiple border height and horizontal scroll bar is not available height.
3. The following can be clearly understood offsetheight and offsettop
For a div box.
Offsetheight = height + border-top + border-bottom + padding-top + Padding-bottom;
offsettop is equal to Border-top's upper edge distance from the top of the page (not counting the body of the Border-top)
<! DOCTYPEHTML> <HTML> < Headlang="en"> <Metacharset="UTF-8"> <title></title> <Scriptsrc="Jquery-1.8.3/jquery.js"></Script> <style> *{margin:0;
padding:0; } div{width:200px; height:200px; Border:5px Solid Gray; Background-color:#ccc; Padding:5px; }
.Skyblue{background-color:Skyblue; }
.Greenyellow{background-color:Greenyellow; }#box4{width:100px; height:100px; } </style> </ Head> < Body> <Divid="Box1"></Div> <Divclass="Skyblue"></Div> <Divclass="Greenyellow"id="Box3"> <Divid="Box4"></Div> </Div> <Script>varBox3 = $ ("#box3") [0];varBox1 =Document. getElementById ("Box1");varBox4 =Document. getElementById ("Box4");Console. log (Box1.offsettop);Console. log (Box1.offsetheight);Console. log (Box3.offsetheight);Console. log (Box3.offsettop);Console. log (box4.offsettop); </Script> </ Body> </HTML>
all the back, an article from the cocky guy.
Quote the most classic, most detailed picture
ScrollHeight: Gets the scrolling height of the object.
ScrollLeft: Sets or gets the left distance between the left edge of an object and the current visible content in the window
ScrollTop: Sets or gets the distance between the top of the object and the topmost part of the visible content in the window
ScrollWidth: Gets the scrolling width of the object
Offsetheight: Gets the height of the object relative to the layout or parent coordinates specified by the parent coordinate offsetparent property
Offsetleft: Gets the calculated left position of the object relative to the layout or the parent coordinates specified by the Offsetparent property
offsettop: Gets the calculated top position of the object relative to the layout or the parent coordinates specified by the offsettop property
Event.clientx the horizontal coordinates of the relative document
Event.clienty vertical coordinates relative to document
The horizontal coordinates of the event.offsetx relative to the container
The vertical coordinates of the event.offsety relative to the container
Document.documentElement.scrollTop The vertical scrolling value
Event.clientx+document.documentelement.scrolltop relative to the document's horizontal coordinates + vertical scrolling amount
Above mainly refers to IE, the Firefox difference is as follows:
IE6.0, ff1.06+:
clientwidth = width + padding
clientheight = height + padding
offsetwidth = width + padding + border
offsetheight = height + padding + border
ie5.0/5.5:
ClientWidth = Width-border
ClientHeight = Height-border
offsetwidth = width
offsetheight = height
(Need to mention: CSS in the margin attribute, and clientwidth, Offsetwidth, clientheight, offsetheight are irrelevant)
onmouseover when the mouse passes, the trigger = the following script function
onmouseout when the mouse leaves.
OnMouseUP when the mouse is pressed and lifted ...
OnMouseMove when the mouse moves.
OnMouseDown when the mouse is pressed ...
Suppose that obj is an HTML control.
Obj.offsettop refers to the calculated upper-side position of obj relative to the layout or the parent coordinates specified by the Offsetparent property, Integer, per pixel.
Obj.offsetleft refers to the position, integer, and pixel of the left of obj's calculation relative to the layout or the parent coordinates specified by the Offsetparent property.
Obj.offsetwidth refers to the absolute width of the obj control itself, excluding parts that are not displayed because of overflow, that is, the width, integer, and unit pixel that it actually occupies.
Obj.offsetheight refers to the absolute height of the obj control itself, excluding parts that are not displayed because of overflow, that is, the height it actually occupies, the integer, and the unit pixel.
Let's make a note of the offsetparent mentioned above.
Offsetparent gets a reference to the container object that defines the offsettop and Offsetleft properties of the object. offsettop and offsetparent are very complex, different browsers have different interpretations, floating explanation is different, so we generally as long as understanding through the two can get control in the browser absolute position.
The above properties are also valid in FireFox.
Also: What we're talking about here is the attribute value of the HTML control, not the Document.body,document.body value in different browsers (in fact, most environments are caused by different interpretations of the document.body, not because of the Offset to explain the difference caused)
We know that offsettop can get the position of the HTML element distance above or the outer element, Style.top is also OK, the difference is:
One, offsettop return is a number, and Style.top returns a string, in addition to the number of units: px.
Second, offsettop read only, and Style.top can read and write.
Third, if the HTML element has not been specified with the top style, then Style.top returns an empty string.
The same is true of Offsetleft and Style.left, offsetwidth and Style.width, Offsetheight and Style.height.
ClientHeight
We have no objections to clientheight, are considered to be the height of the content visual area, that is, the page browser can see the content of the height of the area, is generally the last tool bar below to the status bar above the area, and the content of the page is irrelevant.
Offsetheight
IE, Opera think offsetheight = clientheight + scroll bar + border.
NS, FF think offsetheight is the actual height of Web page content, can be less than clientheight.
ScrollHeight
IE, Opera think ScrollHeight is the actual height of Web page content, can be less than clientheight.
NS, FF think ScrollHeight is a Web page content height, but the minimum value is clientheight.
To put it simply
ClientHeight is the height of this area of the content through the browser.
NS, FF think Offsetheight and scrollheight are page content height, but when the content height of Web page is less than equal to ClientHeight, scrollheight value is clientheight, and offsetheight Can be less than clientheight.
IE, Opera think Offsetheight is the visual area clientheight scroll bar plus border. ScrollHeight is the actual height of the Web page content.
Similarly
The explanations for clientwidth, offsetwidth and ScrollWidth are the same as the above, except that the height is changed to width.
Description
The above DTD-based HTML 4.01 Transitional, if it is a DTD XHTML 1.0 transitional The meaning is different, in XHTML, these three values are the same value, both represent the actual height of the content. Most new versions of browsers support different interpreters based on the DOCTYPE specified by the page
ScrollTop is the height value of the volume, example:
<div style= "Width:100px;height:100px;background-color: #FF0000; overflow:hidden;" id= "P" >
<div style= "Width:50px;height:300px;background-color: #0000FF;" id= "T" > If scrolltop is set for p, the content may not be fully displayed. </div>
</div>
<script type= "Text/javascript" >
var p = document.getElementById ("P");
P.scrolltop = 10;
</script>
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
