scrollTop usage instructions_basic knowledge-JS Tutorial-php.cn

In the demo below, the height value of the outer element is 200px, and the height value of the inner element is 300px. Obviously, the "content in the outer element" is higher than the "outer element" itself. When the scroll bar is dragged downward, part of the content will be hidden outside the "upper boundary of the outer element", and scrollTop is equal to The height of this "invisible content".
Demo: (Drag the scroll bar, you can see the change of scrollTop value)
These texts are displayed in the inner element.
scrollTop value is:

[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute ]

Explanation:
Inside The height value of the layer 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, and the outer element has overflow set to auto, so the outer element An up-down sliding bar will appear on the right side of the element
In the initial state, the "upper boundary of the inner element" and the "upper boundary of the outer element" coincide with each other, and no content exceeds the "upper border of the outer element" , at this time the value of the scrollTop attribute is 0.
When the scroll bar is dragged downward, the content that exceeds the "upper boundary of the outer element" will gradually increase, and the scrollTop value is equal to these excess parts.
When the scroll bar is dragged to the bottom, the "lower border of the inner element" and the "lower border of the outer element" coincide, and the height of the content exceeding the "upper border of the outer element" = 300px-200px= 100px, which is the scrollTop value at this time.
Read through js code and write the value of scrollTop
Note: The usage of scrollTop is element.scrollTop, not element.style.scrollTop
Read the value of scrollTop through js code
In the above demonstration example, the read operation of scrollTop has actually been used. Specifically, during the process of dragging the scroll bar, the value of scrollTop at this time will be read and displayed in the text below.
The complete original code of the above demonstration example:

[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]

Explanation:
When When dragging the "scroll bar of the outer element", the onscroll event will be generated. Register a handler function named for this event that reads the value of scrollTop and displays it
In the event handler function that reads the value of scrollTop and displays it, the "outer element" is obtained through the outer element _div.scrollTop The value of scrollTop at that time is displayed 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:
These texts are displayed in the inner element.
scrollTop value is:
Set scrollTop to 50 Set scrollTop to 500
Enter the value of scrollTop: OK
The complete original code of the above demonstration example:

<div style="width:200px;height:200px;background-color:#999999;overflow:auto;" id="外层元素A">
<div style="width:100px;height:300px;background-color:#FFFF00;" id="内层元素A">
</div>
The text appears in the inner element. 
</div>
<script type="text/javascript"> 
var 外层元素_div = document.getElementById("外层元素"); 
外层元素_div.onscroll=读取scrollTop的值并显示出来; 
////注册onscroll事件处理函数。当拖动滚动条时，会产生onscroll事件 
var span_演示元素scrollTop的值 = document.getElementById("演示元素scrollTop的值"); 
//onscroll事件的处理函数 
function 读取scrollTop的值并显示出来() 
{span_演示元素scrollTop的值.innerHTML=外层元素_div.scrollTop; 
//读取"外层元素"此时的scrollTop的值并显示出来 
} 
读取scrollTop的值并显示出来(); 
//页面加载完成后，执行一次此函数。显示最初的scrollTop值，此时的值为0 
</script> 
<p>scrollTop值是：<span id="外层元素A的scrollTop的值"></span></p> 
<p><button type="button" onclick="div_外层元素A.scrollTop=50;">把scrollTop设为50</button> 
<button type="button" onclick="div_外层元素A.scrollTop=500;">把scrollTop设为500</button> 
</p> 
<p>输入scrollTop的值:<input type="text" id="输入scrollTop的值" value=""> 
<button type="button" onclick="设置scrollTop的值()" name="设置scrollTop的值">确定</button> 
</p> 
<script type="text/javascript"> 
var div_外层元素A = document.getElementById("外层元素A"); 
div_外层元素A.onscroll=读取scrollTop的值并显示出来; 
//注册onscroll事件处理函数。当拖动滚动条时，会产生onscroll事件 
var span_外层元素A的scrollTop的值 = document.getElementById("外层元素A的scrollTop的值"); 
//onscroll事件的处理函数 
function 读取scrollTop的值并显示出来() 
{span_外层元素A的scrollTop的值.innerHTML=div_外层元素A.scrollTop; 
//读取"外层元素"此时的scrollTop的值并显示出来 
} 
读取scrollTop的值并显示出来(); 
//页面加载完成后，执行一次此函数。显示最初的scrollTop值，此时的值为0 
div_外层元素A.scrollTop = 10; 
//通过js语句来设置scrollTop的值,本条语句会触发onscroll事件，使得"读取scrollTop的值并显示出来"函数执行一次。 
function 设置scrollTop的值() 
{ if("" != document.getElementById("输入scrollTop的值").value) 
div_外层元素A.scrollTop = document.getElementById("输入scrollTop的值").value; 
else alert("请输入一个数值"); 
}</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

解释：
形如div_外层元素A.scrollTop = 12345;的赋值语句会触发onscroll事件，使得读取scrollTop的值并显示出来函数执行一次
上一个例子中已经提到：当拖动滚动条到最底部时，scrollTop=300px-200px=100px，这是scrollTop能够取的最大值。当用更大的值赋给scrollTop时，scrollTop会自动把它转变为100。例如上面的“把scrollTop设为500”按钮，scrollTop会把500转变为100。
得到body元素的scrollTop
body元素的scrollTop是超出“浏览器窗口上边界”的内容的高度
当html文档头部包含有“文档类型声明”时，需要用document.documentElement.scrollTop获得正确的值，而document.body.scrollTop的值为0

复制代码代码如下:

当html文档头部不包含任何“文档类型声明”时，需要用document.body.scrollTop获得正确的值，而document.documentElement.scrollTop的值为0
下面定义的get_scrollTop_of_body()方法可以处理这种差异

复制代码代码如下:

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; 
}