<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 element.
 </div>
</div>

Explanation:

• The height value of the inner element is 300px > the height value of the outer element is 200px, so the "content of the outer element" (that is, the "inner element") cannot be fully displayed, while the outer element sets overflow to auto, so a vertical slider will appear on the right side of the outer element
• In the initial state, the upper boundary of the inner element coincides with the upper boundary of the outer element, and nothing exceeds the upper boundary of the outer element. At this time, the value of the scrollTop attribute is 0.
• When the scroll block is dragged down, the contents exceeding the "upper boundary of outer element" will gradually increase, and the scrollTop value is equal to the height of these exceeding parts.
• When dragging the scroll block to the bottom, the "lower boundary of inner element" coincides with the "lower boundary of outer element". At this time, the height of the content exceeding the "upper boundary of outer element" is 300px-200px=100px, that is, the scrollTop value at this time.

Read and write the value of scrollTop through js code

Note: the use of scrolltop is element Scrolltop instead of element style. scrollTop

Read the value of scrollTop through js code

In the above demonstration example, the scrollTop read operation has been used. Specifically, during the process of dragging the scroll bar, the scrollTop value at this time will be read and displayed in the text below.

The complete original code of the above demonstration example:

<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 element.
 </div>
</div>
 
<p>scrollTop The values are:<span id="Displays the of the outer element scrollTop value"></span></p>
 
<script type="text/javascript">
 var div_Outer element = document.getElementById("Outer element");
  div_Outer element.onscroll=Read the of the outer element scrollTop Value and display;
  //Register the onscroll event handler. When you drag the scroll bar, an onscroll event is generated
 
  var span_Displays the of the outer element scrollTop value = document.getElementById("Displays the of the outer element scrollTop value");
 
  //Handler for onscroll event
  function Read the of the outer element scrollTop Value and display() 
  {span_Displays the of the outer element scrollTop value.innerHTML=div_Outer element.scrollTop;
   //Read the value of scrollTop of "outer element" at this time and display it
  }
 
  Read the of the outer element scrollTop Value and display();
 //After the page is loaded, execute this function once. Displays the initial scrollTop value, which is 0
</script>

Explanation:

• When you drag the scroll bar of the outer element, an onscroll event is generated. Register a handler named to read the value of scrollTop and display it for this event
• In the event handler that reads the value of scrollTop and displays it, the outer element_ div.scrollTop gets the value of scrollTop at that time of "outer element" and displays it on the page.

Set the value of scrollTop through js code

Make some modifications to the above demonstration example. Add function: set the value of scrollTop through js statement

Example:

The complete original code of the above demonstration example:

<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 element.
 </div>
</div>
 
<p>scrollTop The values are:<span id="Show outer elements A of scrollTop value"></span></p>
 
<p><button type="button" onclick="div_Outer element A.scrollTop=50;">hold scrollTop Set to 50</button>
     <button type="button" onclick="div_Outer element A.scrollTop=500;">hold scrollTop Set to 500</button>
</p>
 
<p>input scrollTop Value of:<input type="text" id="input scrollTop Value of" value="" />
  <button type="button" onclick="set up scrollTop Value of()" name="set up scrollTop Value of">determine</button>
</p>
 
<script type="text/javascript">
 var div_Outer element A = document.getElementById("Outer element A");
 div_Outer element A.onscroll=Read outer element A of scrollTop Value and display;
 //Register the onscroll event handler. When you drag the scroll bar, an onscroll event is generated
 
 var span_Show outer elements A of scrollTop value = document.getElementById("Show outer elements A of scrollTop value");
 
 //Handler for onscroll event
 function Read outer element A of scrollTop Value and display() 
 {span_Show outer elements A of scrollTop value.innerHTML=div_Outer element A.scrollTop;
 //Read the value of scrollTop of "outer element" at this time and display it
 }
 
 Read outer element A of scrollTop Value and display();
 //After the page is loaded, execute this function once. Displays the initial scrollTop value, which is 0
 
 div_Outer element A.scrollTop = 10;
 //Set the value of scrollTop through the js statement. This statement will trigger the onscroll event, so that the "read and display the scrollTop value of outer element A" function is executed once.
 
 function set up scrollTop Value of()
{if("" != document.getElementById("input scrollTop Value of").value)
  div_Outer element A.scrollTop = document.getElementById("input scrollTop Value of").value;
 else alert("Please enter a numeric value");
 }
</script>

Explanation:

• Shaped like div_ Outer element A.scrollTop = 12345; The assignment statement of will trigger the onscroll event, so that the value of scrollTop is read and displayed, 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 will automatically change it to 100. For example, with the "set scrollTop to 500" button above, scrollTop will change 500 to 100.

Get the scrollTop of the body element

The scrollTop of the body element refers to the height of the content beyond the "upper boundary of the browser window"

When the html document header contains a "document type declaration", you need to use document documentElement. Scrolltop gets the correct value, while document body. The value of scrolltop 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.documentElement.scrollTop:"+document.documentElement.scrollTop //Correct value
      +"document.body.scrollTop:"+document.body.scrollTop //The value is 0
      );
</script>

When the html document header does not contain any "document type declaration", you need to use document body. Scrolltop gets the correct value, while document documentElement. The value of scrolltop is 0

Get defined below_ scrollTop_ of_ The body () function can handle this difference and get 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 != 'BackCompat'){
  scrollTop = document.documentElement.scrollTop;
 }
 else 
   if(typeof document.body != 'undefined'){
     scrollTop = document.body.scrollTop;
 }
return scrollTop;
}

Copyright notice: This article is the original article of the blogger and follows the CC 4.0 BY-SA copyright agreement. For reprint, please attach the source link of the original text and this notice. Link to this article: https://blog.csdn.net/gang_gang_gang/article/details/4233044