scrollTop

scrollTop属性是什么?

有些情况下,“元素中内容”的高度会超过“元素本身”的高度, scrollTop指的是“元素中的内容”超出“元素上边界”的那部分的高度。

通过一个实例演示来讲述scrollTop属性是什么

下面的演示中，外层元素的高度值是200px,内层元素的高度值是300px。很明显，“外层元素中的内容”高过了“外层元素”本身.当向下拖动滚动条时，有部分内容会隐没在“外层元素的上边界”之外，scrollTop就等于这部分“不可见的内容”的高度。

演示：（拖动滚动条，可以看到scrollTop值的变化）

这些文字显示在内层元素中。

scrollTop值是：

<script type="text/javascript"> </script>

 

上面演示中可滚动元素的原码：

1. <div style="width:200px;height:200px;background-color:#999999;overflow:auto;" id="外层元素">

2. <div style="width:100px;height:300px;background-color:#FFFF00;" id="内层元素">

3. 这些文字显示在内层元素中。

4. </div>

5. </div>

 

解释：

• 内层元素的高度值300px > 外层元素的高度值200px,因此“外层元素的内容”(也就是“内层元素”)无法完全显示，而外层元素把overflow设置为auto，因此外层元素的右侧会出现竖直滑动条
• 初始状态下，“内层元素的上边界”和“外层元素的上边界”重合，没有任何内容超过“外层元素的上边界”，此时scrollTop属性的值为0。
• 当向下拖动滚动块时，超过“外层元素的上边界”的内容会逐渐增多，scrollTop值就等于这些超出部分的高度。
• 当拖动滚动块到最底部时，“内层元素的下边界”和“外层元素的下边界”重合，此时,超过“外层元素的上边界”的内容的高度=300px-200px=100px，也就是此时的scrollTop值。

 

通过js代码来读取，写入scrollTop的值

注意：scrollTop的使用方式是element.scrollTop，而不是element.style.scrollTop

通过js代码来读取scrollTop的值

上面的演示实例中，其实已经用到了scrollTop的读取操作。具体来说就是，在拖动滚动条的过程中，会读取此时的scrollTop的值，并在下方文字中显示出来。

上面的演示实例的完整原码：

1. <div style="width:200px;height:200px;background-color:#999999;overflow:auto;" id="外层元素">

2. <div style="width:100px;height:300px;background-color:#FFFF00;" id="内层元素">

3. 这些文字显示在内层元素中。

4. </div>

5. </div>

6.  

7. <p>scrollTop值是：<span id="显示外层元素的scrollTop值"></span></p>

8.  

9. <script type="text/javascript">

10. var div_外层元素 = document.getElementById("外层元素");

11. div_外层元素.onscroll=读取外层元素的scrollTop值并显示出来;

12. //注册onscroll事件处理函数。当拖动滚动条时，会产生onscroll事件

13.  

14. var span_显示外层元素的scrollTop值 = document.getElementById("显示外层元素的scrollTop值");

15.  

16. //onscroll事件的处理函数

17. function 读取外层元素的scrollTop值并显示出来()

18. {span_显示外层元素的scrollTop值.innerHTML=div_外层元素.scrollTop;

19. //读取“外层元素”此时的scrollTop的值并显示出来

20. }

21.  

22. 读取外层元素的scrollTop值并显示出来();

23. //页面加载完成后，执行一次此函数。显示最初的scrollTop值，此时的值为0

24. </script>

 

解释：

• 当拖动“外层元素的滚动条”时，会产生onscroll事件。为这个事件注册一个名为读取scrollTop的值并显示出来的处理函数
• 在读取scrollTop的值并显示出来这个事件处理函数中，通过外层元素_div.scrollTop得到“外层元素”当时的scrollTop的值，并显示在页面上。

 

通过js代码来设置scrollTop的值

对上面的演示例子作一些修改。添加功能：通过js语句来设置scrollTop的值

示例：

这些文字显示在内层元素中。

scrollTop值是：

把scrollTop设为50把scrollTop设为500

输入scrollTop的值:确定

<script type="text/javascript"> </script>

 

上面的演示实例的完整原码：

1. <div style="width:200px;height:200px;background-color:#999999;overflow:auto;" id="外层元素A">

2. <div style="width:100px;height:300px;background-color:#FFFF00;" id="内层元素A">

3. 这些文字显示在内层元素中。

4. </div>

5. </div>

6.  

7. <p>scrollTop值是：<span id="显示外层元素A的scrollTop值"></span></p>

8.  

9. <p><button type="button" onclick="div_外层元素A.scrollTop=50;">把scrollTop设为50</button>

10. <button type="button" onclick="div_外层元素A.scrollTop=500;">把scrollTop设为500</button>

11. </p>

12.  

13. <p>输入scrollTop的值:<input type="text" id="输入scrollTop的值" value="" />

14. <button type="button" onclick="设置scrollTop的值()" name="设置scrollTop的值">确定</button>

15. </p>

16.  

17. <script type="text/javascript">

18. var div_外层元素A = document.getElementById("外层元素A");

19. div_外层元素A.onscroll=读取外层元素A的scrollTop值并显示出来;

20. //注册onscroll事件处理函数。当拖动滚动条时，会产生onscroll事件

21.  

22. var span_显示外层元素A的scrollTop值 = document.getElementById("显示外层元素A的scrollTop值");

23.  

24. //onscroll事件的处理函数

25. function 读取外层元素A的scrollTop值并显示出来()

26. {span_显示外层元素A的scrollTop值.innerHTML=div_外层元素A.scrollTop;

27. //读取“外层元素”此时的scrollTop的值并显示出来

28. }

29.  

30. 读取外层元素A的scrollTop值并显示出来();

31. //页面加载完成后，执行一次此函数。显示最初的scrollTop值，此时的值为0

32.  

33. div_外层元素A.scrollTop = 10;

34. //通过js语句来设置scrollTop的值,本条语句会触发onscroll事件，使得"读取外层元素A的scrollTop值并显示出来"函数执行一次。

35.  

36. function 设置scrollTop的值()

37. {if("" != document.getElementById("输入scrollTop的值").value)

38. div_外层元素A.scrollTop = document.getElementById("输入scrollTop的值").value;

39. else alert("请输入一个数值");

40. }

41. </script>

 

解释：

• 形如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

 

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2. <script type="text/javascript">

3. alert("document.documentElement.scrollTop:"+document.documentElement.scrollTop //正确的值

4. +"document.body.scrollTop:"+document.body.scrollTop //值为0

5. );

6. </script>

 

当html文档头部不包含任何“文档类型声明”时，需要用document.body.scrollTop获得正确的值，而document.documentElement.scrollTop的值为0

下面定义的get_scrollTop_of_body()函数可以处理这种差异,得到body元素的scrollTop值

1. function get_scrollTop_of_body(){

2. var scrollTop;

3. if(typeof window.pageYOffset != 'undefined'){

4. scrollTop = window.pageYOffset;

5. }

6. else

7. if(typeof document.compatMode != 'undefined' &&

8. document.compatMode != 'BackCompat'){

9. scrollTop = document.documentElement.scrollTop;

10. }

11. else

12. if(typeof document.body != 'undefined'){

13. scrollTop = document.body.scrollTop;

14. }

15. return scrollTop;

16. }