Top, postop, scrolltop, offsetTop, scrollHeight, offsetHeight, clientHeight, and postopscrollheight

Top, postop, scrolltop, offsetTop, scrollHeight, offsetHeight, clientHeight, and postopscrollheight

1. top

This attribute is only available when the position attribute of an object is set. Otherwise, this attribute is ignored.

The Code is as follows:
<Div style = "position: absolute; width: 100px; height: 100px;">
<P style = "position: absolute; top:-5px;"> test top </p>
</Div>

Above is a section P included in a DIV. You can see that after P's top is set to-5px, its top margin exceeds the top margin of the container DIV, the above distance is the set 5px.

Note that both DIV and P must be set to absolute to get the desired result. If the parent element is not set, then, the reference of the child element will be the element that has defined position on the upper layer until the entire document;

2. posTop

The value of posTop is actually the same as that of top, but the difference is that the unit of the top element is px, while that of posTop is only a value, which is generally used for calculation.

3. scrollTop

The Code is as follows:
<Div id = "container" style = "width: 100px; height: 100px; overflow: auto;">
<P style = "" mce_style = "">
Here is the text
</P>
</Div>
<Script type = "text/javascript"> <! --
Container. scrollTop = 12;
// --> </Script>

This section of text cannot be fully displayed in the DIV of 100*100. Therefore, if overflow is set to auto, a sliding box in the upper and lower directions appears. If no id is set. the slider is located at the top by default. After the scrollTop value is set to 12, the position of the slider is changed. By default, the text that has been written in 12 pixels is displayed. If overflow is set to hidden, the top 12 pixels of text cannot be displayed.

Note that the setting method is id. scrollTop, instead of id. style. scrollTop.

4. offsetTop

If element A is the body element of HTML, its display attribute is calculated as none, or it does not have a css layout box, 0 is returned and the algorithm is stopped.

If the offsetParent of Element A is null or the body element of HTML, the vertical distance between the border of Element A and the canvas origin is returned in units of CSS pixels, and the algorithm is stopped.

Return the distance between the upper border of Element A and its upper border of offsetParent in units of CSS pixels.
 
5. scrollHeight and offsetHeight and clientHeight

For document. body

ClientHeight
Everyone has no objection to clientHeight and thinks it is the height of the visible area of the content, that is, the height of the area where the content can be viewed in the browser of the page, generally, the area below the last toolbar to above the status bar is irrelevant to the page content.

OffsetHeight
IE and Opera think offsetHeight = clientHeight + scroll bar + border.
NS and FF hold that offsetHeight is the actual height of the webpage content, which can be smaller than clientHeight.

ScrollHeight
IE and Opera hold that scrollHeight is the actual height of the webpage content, which can be smaller than clientHeight.
NS and FF think that scrollHeight is the content height of a webpage, but the minimum value is clientHeight.

For an HTML Control

OffsetHeight is the height of its own elements, and scrollHeight is the height of its own elements + the height of hidden elements.

The Code is as follows:
<Div id = "container" style = "width: 100px; height: 100px; overflow: auto;">
<P style = "height: 250px;">
Don't be a lover, a cat, a dog, a lover, a pet, at least cute, charming, and you don't have to worry about it. Tomorrow will be yours. </p>
</Div>
<Script type = "text/javascript"> <! --
Alert (container. offsetHeight );
Alert (container. scrollHeight );
// --> </Script>

Output 100,250 in sequence. Because the height of an element has been specified to be 100px, offsetHeight is always 100px; the internal element is 250px, and the container element is only 100px, so there is a 150px content that cannot be displayed, but it actually exists, so the scrollHeight value is 100 + 150 = 250.

What is scrollheight, scrolltop, and offsetheight? For example, do not explain it in text language.

ScrollHeight, scrollTop, offsetHeight
I have never decided to learn js, and many knowledge points have fallen! In the past few days, the company has set up a lottery module to display information about the winning users in a scroll-back manner. There are still a lot of online scrolling effects, and I have done similar effects before, but this is not as smooth as before, it is not just a sense of jumping. Let's study the three birds: scrollHeight, scrollTop, and offsetHeight.
Start with a 'prop 'and prepare for the following explanation:
Article 1
Article 2
Article 3
Article 4
<Script type = "text/javascript"> // <! [CDATA [
Var test = document. getElementById ('test ');
Var inner1 = document. getElementById ('inner1 ');
Var inner2 = document. getElementById ('inner2 ');
Inner2.innerHTML = inner1.innerHTML;

// Alert (test. offsetHeight );
// Alert (test. scrollHeight );
// Alert (test. scrollTop );

// Alert (inner1.offsetHeight );
// Alert (inner1.scrollHeight );
// Alert (inner1.scrollTop );

// Alert (inner2.offsetHeight );
// Alert (inner. scrollHeight );
// Alert (inner. scrollTop );

SetInterval (add, 70 );
Function add (){
If (inner1.offsetHeight-test. scrollTop <= 0 ){
// Alert (test. scrollTop );
Test. scrollTop-= inner1.offsetHeight;
// Alert (test. scrollTop );
} Else {
Test. scrollTop ++;
}
}
//]> </Script>
ScrollHeight: It looks a bit like the height of the scroll bar. In fact, it is not, although it does have a relationship with the scroll bar. It refers to the height of an element without the following restrictions: height and overflow. For example, in the div above: id = "test", his scrollHeight is 280px. Why is this number !? This can be calculated as follows: the height of inner1 is 35 * 4px (Note: The line-height of each row is 35px, 4 rows in total, cut the height of the p label's internal and external border margin padding), and then because the js contains this sentence: inner2.innerHTML = inner1.innerHTML; copy the html mark in innner1 to innner2, so the current height of inner2 is 35 * 4px, so the height of test is 280px = inner1 + inner2;
OffsetHeight: This is a theme... the rest of the full text>


Demo1offsetTop-demoscrollTop> = 0) What do you mean

OffsetTop the distance from the current object to the top of its upper layer. The distance from the top of the scrollTop object to the top edge of the object within the range displayed in the current window.