scrolltop属性是什么?
有些情况下,“元素中内容”的高度会超过“元素本身”的高度, scrolltop指的是“元素中的内容”超出“元素上边界”的那部分的高度。
通过一个实例演示来讲述scrolltop属性是什么
下面的演示中，外层元素的高度值是200px
,内层元素的高度值是300px
。很明显，“外层元素中的内容”高过了“外层元素”本身.当向下拖动滚动条时，有部分内容会隐没在“外层元素的上边界”之外，scrolltop就等于这部分“不可见的内容”的高度。
演示：（拖动滚动条，可以看到scrolltop值的变化）
这些文字显示在内层元素中。
scrolltop值是：
上面演示中可滚动元素的原码：
这些文字显示在内层元素中。
解释：
- 内层元素的高度值
300px
> 外层元素的高度值200px
,因此“外层元素的内容”(也就是“内层元素”)无法完全显示，而外层元素把overflow
设置为auto
，因此外层元素的右侧会出现竖直滑动条 - 初始状态下，“内层元素的上边界”和“外层元素的上边界”重合，没有任何内容超过“外层元素的上边界”，此时scrolltop属性的值为0。
- 当向下拖动滚动块时，超过“外层元素的上边界”的内容会逐渐增多，scrolltop值就等于这些超出部分的高度。
- 当拖动滚动块到最底部时，“内层元素的下边界”和“外层元素的下边界”重合，此时,超过“外层元素的上边界”的内容的高度=300px-200px=100px，也就是此时的scrolltop值。
通过js代码来读取，写入scrolltop的值
注意：scrolltop的使用方式是element.scrolltop，而不是element.style.scrolltop
通过js代码来读取scrolltop的值
上面的演示实例中，其实已经用到了scrolltop的读取操作。具体来说就是，在拖动滚动条的过程中，会读取此时的scrolltop的值，并在下方文字中显示出来。
上面的演示实例的完整原码：
这些文字显示在内层元素中。
scrolltop值是：
解释：
- 当拖动“外层元素的滚动条”时，会产生
onscroll
事件。为这个事件注册一个名为读取scrolltop的值并显示出来
的处理函数 - 在
读取scrolltop的值并显示出来
这个事件处理函数中，通过外层元素_div.scrolltop
得到“外层元素”当时的scrolltop的值，并显示在页面上。
通过js代码来设置scrolltop的值
对上面的演示例子作一些修改。添加功能：通过js语句来设置scrolltop的值
示例：
这些文字显示在内层元素中。
scrolltop值是：
把scrolltop设为50把scrolltop设为500
输入scrolltop的值:确定
上面的演示实例的完整原码：
这些文字显示在内层元素中。
scrolltop值是：
输入scrolltop的值:
解释：
- 形如
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()函数可以处理这种差异,得到body元素的scrolltop值
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;
}