scroll top_scroll是哪个键

scroll top_scroll是哪个键scrollTop属性是什么?有些情况下,“元素中内容”的高度会超过“元素本身”的高度,scrollTop指的是“元素中的内容”超出“元素上边界”的那部分的高度

scroll

scrollTop属性是什么?

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

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

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

演示:(拖动滚动条,可以看到scrollTop值的变化)

[演示区域](https://blog.csdn.net/gang_gang_gang/article/details/4233044)

scrollTop值是:”显示外层元素的scrollTop值”

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

<div style="width:200px;height:200px;background-color:#999999;overflow:auto;" id="外层元素">
 <div style="width:100px;height:300px;background-color:#FFFF00;" id="内层元素"> 
  这些文字显示在内层元素中。
 </div>
</div>

解释:

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

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

注意:scrollTop的使用方式是element.scrollTop,而不是element.style.scrollTop

通过js代码来读取scrollTop的值

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

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

<div style="width:200px;height:200px;background-color:#999999;overflow:auto;" id="外层元素">
 <div style="width:100px;height:300px;background-color:#FFFF00;" id="内层元素"> 
  这些文字显示在内层元素中。
 </div>
</div>
 
<p>scrollTop值是:<span id="显示外层元素的scrollTop值"></span></p>
 
<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>

解释:

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

通过js代码来设置scrollTop的值

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

示例:

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

scrollTop值是:

把scrollTop设为50把scrollTop设为500

输入scrollTop的值:确定

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

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

<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>
</div>
 
<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=读取外层元素A的scrollTop值并显示出来;
 //注册onscroll事件处理函数。当拖动滚动条时,会产生onscroll事件
 
 var span_显示外层元素A的scrollTop值 = document.getElementById("显示外层元素A的scrollTop值");
 
 //onscroll事件的处理函数
 function 读取外层元素A的scrollTop值并显示出来() 
 { 
   span_显示外层元素A的scrollTop值.innerHTML=div_外层元素A.scrollTop;
 //读取“外层元素”此时的scrollTop的值并显示出来
 }
 
 读取外层元素A的scrollTop值并显示出来();
 //页面加载完成后,执行一次此函数。显示最初的scrollTop值,此时的值为0
 
 div_外层元素A.scrollTop = 10;
 //通过js语句来设置scrollTop的值,本条语句会触发onscroll事件,使得"读取外层元素A的scrollTop值并显示出来"函数执行一次。
 
 function 设置scrollTop的值()
{ 
   if("" != document.getElementById("输入scrollTop的值").value)
  div_外层元素A.scrollTop = document.getElementById("输入scrollTop的值").value;
 else alert("请输入一个数值");
 }
</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

<!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 //正确的值
      +"document.body.scrollTop:"+document.body.scrollTop //值为0
      );
</script>

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/gang_gang_gang/article/details/4233044今天的文章scroll top_scroll是哪个键分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/77223.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注