What is scrolltop and Its Usage

In some cases, the height of "content in an element" exceeds the height of "element itself". scrolltop refers to the height of the part where "content in an element" exceeds the "element upper boundary.

Use an example to describe what the scrolltop attribute is.
In the following example, the height of the outer element is 200px, and that of the inner element is 300px. Obviously, the content in the outer element is higher than that in the outer element itself. when a scroll bar is dragged down, some content is invisible beyond the upper boundary of the outer element, and scrolltop is equal to the height of this part of "invisible content.

Demonstration: (drag the scroll bar to see the changes in the scrolltop value)

The text is displayed in the inner layer element.
Scrolltop value: 0

The original code of the scrolling element is as follows:

<Div style = "width: 200px; Height: 200px; Background-color: #999999; overflow: auto;" id = "outer element">
<Div style = "width: 100px; Height: 300px; Background-color: # FFFF00;" id = "inner element">
The text is displayed in the inner layer element.
</Div>
</Div>
Explanation:

The height of the inner element is 300px> the height of the outer element is 200px. Therefore, the content of the outer element (that is, the content of the inner element) cannot be completely displayed, the outer element sets overflow to auto, so a Vertical Slide appears on the right of the outer element.
In the initial state, the "upper boundary of the inner element" and "upper boundary of the outer element" overlap, and no content exceeds the "upper boundary of the outer element". At this time, the value of the scrolltop attribute is 0.
When a scroll block is dragged down, content that exceeds the upper boundary of the outer element increases gradually, and the scrolltop value equals to the height of the excess part.
When you drag the scroll block to the bottom, the "bottom boundary of the inner element" and "bottom boundary of the outer element" overlap, the height of the content that exceeds the upper boundary of the outer element = 300px-200px = 100px, that is, the scrolltop value at this time.

Through JSCodeTo read and write the scrolltop value.
Note: scrolltop is used by element. scrolltop, instead of element. style. scrolltop.

Use JS Code to read scrolltop values
The scrolltop read operation is actually used in the demo above. Specifically, when you drag a scroll bar, the scrolltop value is read and displayed in the text below.

The complete original code of the demo instance above:

<Div style = "width: 200px; Height: 200px; Background-color: #999999; overflow: auto;" id = "outer element">
<Div style = "width: 100px; Height: 300px; Background-color: # FFFF00;" id = "inner element">
The text is displayed in the inner layer element.
</Div>
</Div>

<P> the scrolltop value is: <span id = "display the scrolltop value of the outer element"> </span> </P>

<SCRIPT type = "text/JavaScript">
VaR Div _ outer element = Document. getelementbyid ("outer element ");
Div _ outer element. onscroll = reads and displays the scrolltop value of the outer element;
// Register the onscroll event handler function. When you drag a scroll bar, an onscroll event is generated.
 
VaR span _ show the scrolltop value of the outer element = Document. getelementbyid ("show the scrolltop value of the outer element ");
 
// Onscroll event processing function
Function reads the scrolltop value of the outer element and displays it ()
{Span _ display the scrolltop value of the outer element. innerhtml = div _ outer element. scrolltop;
// Read the scrolltop value of the "outer element" and display it.
}
 
Read the scrolltop value of the outer element and display it ();
// After the page is loaded, run this function once. Displays the initial scrolltop value. The value is 0.
</SCRIPT>
Explanation:

When you drag the scroll bar of the outer element, an onscroll event is generated. Register a processing function named "read scrolltop" for this event and display it.
In the event processing function that reads the scrolltop value and displays it, the current scrolltop Value of "outer element" is obtained through the outer element _ Div. scrolltop and displayed on the page.

Use JS Code to set scrolltop values
Make some modifications to the preceding demo. Add function: Use JS statements to set scrolltop values

Example:

The text is displayed in the inner layer element.
Scrolltop value: 0

Set scrolltop to 50 and set scrolltop to 500.

Enter the scrolltop value: OK

The complete original code of the demo instance above:

<Div style = "width: 200px; Height: 200px; Background-color: #999999; overflow: auto;" id = "outer element a">
<Div style = "width: 100px; Height: 300px; Background-color: # FFFF00;" id = "inner element a">
The text is displayed in the inner layer element.
</Div>
</Div>

<P> the scrolltop value is: <span id = "display the scrolltop value of outer element a"> </span> </P>

<P> <button type = "button" onclick = "Div _ outer Element A. scrolltop = 50;"> set scrolltop to 50 </button>
<Button type = "button" onclick = "Div _ outer Element A. scrolltop = 500;"> set scrolltop to 500 </button>
</P>
 
<P> input scrolltop value: <input type = "text" id = "input scrolltop value" value = ""/>
<Button type = "button" onclick = "set scrolltop value ()" name = "set scrolltop value"> OK </button>
</P>

<SCRIPT type = "text/JavaScript">
VaR Div _ outer Element A = Document. getelementbyid ("outer element ");
Div _ outer Element A. onscroll = reads the scrolltop value of outer Element A and displays it;
// Register the onscroll event handler function. When you drag a scroll bar, an onscroll event is generated.

VaR span _ show the scrolltop value of the outer Element A = Document. getelementbyid ("show the scrolltop value of the outer element ");

// Onscroll event processing function
Function reads the scrolltop value of the outer Element A and displays the result ()
{Span _ display the scrolltop value of the outer Element A. innerhtml = div _ outer Element A. scrolltop;
// Read the scrolltop value of the "outer element" and display it.
}

Read the scrolltop value of the outer Element A and display it ();
// After the page is loaded, run this function once. Displays the initial scrolltop value. The value is 0.

Div _ outer Element A. scrolltop = 10;
// Use JS statements to set the scrolltop value. This statement triggers the onscroll event so that "read the scrolltop value of the outer Element A and display it" the function is executed once.

Function sets the scrolltop value ()
{If (""! = Document. getelementbyid ("input scrolltop value"). value)
Div _ outer Element A. scrolltop = Document. getelementbyid ("input scrolltop value"). value;
Else alert ("enter a value ");
}
</SCRIPT>
Explanation:

The value assignment statement of the DIV _ outer Element A. scrolltop = 12345; triggers the onscroll event so that the scrolltop value is read and the function is executed once.
As mentioned in the previous example, when you drag the scroll bar to the bottom, scrolltop = 300px-200px = 100px, which is the maximum value that scrolltop can take. When a larger value is assigned to scrolltop, scrolltop automatically converts it to 100. For example, in the above "set scrolltop to 500" button, scrolltop will change 500 to 100.

Obtain the scrolltop of the Body element.
The scrolltop of the Body element refers to the height of the content that exceeds the "upper border of the browser window ".

When the HTML document header contains an animated document, use document.doc umentelement. scrolltop to get the correct value, and the document. Body. scrolltop value is 0.

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<SCRIPT type = "text/JavaScript">
Alert ("document.doc umentelement. scrolltop:" Your document.doc umentelement. scrolltop // correct value
+ "Document. Body. scrolltop:" + document. Body. scrolltop // The value is 0.
);
</SCRIPT>
When the HTML document header does not include any documentation, the value of document.body.scrolltopic is used, and the value of document.doc umentelement. scrolltop is 0.

The get_scrolltop_of_body () function defined below can handle this difference and obtain the scrolltop value of the Body element.

Function get_scrolltop_of_body (){
VaR scrolltop;
If (typeof window. pageyoffset! = 'Undefined '){
Scrolltop = Window. pageyoffset;
}
Else
If (typeof document. compatmode! = 'Undefined '&&
Document. compatmode! = 'Background '){
Scrolltop = document.doc umentelement. scrolltop;
}
Else
If (typeof document. Body! = 'Undefined '){
Scrolltop = Document. Body. scrolltop;
}
Return scrolltop;
}

This article from the csdn blog, reproduced please indicate the source: http://blog.csdn.net/gang_gang_gang/archive/2009/06/01/4233044.aspx