`
cscoder
  • 浏览: 15938 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

scrollTop是什么及用法说明

 
阅读更多

scrollTop属性是什么?

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

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

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

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

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

scrollTop值是：0

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

<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值是：10

把scrollTop设为50把scrollTop设为500

输入scrollTop的值:确定

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

<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;
}
分享到：
| NYOJ 5 Binary String Matching （kmp 字符 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    scrollTop 用法说明

    读取`scrollTop`的值可以使用`element.scrollTop`，例如`document.getElementById("外层元素").scrollTop`。在示例代码中，当外层`div`的滚动条被拖动时，会触发`onscroll`事件，注册的`读取scrollTop的值并显示出来...

    vue项目设置scrollTop不起作用(总结)

    在Vue项目开发中，实现页面滚动至指定内容...本文提供了一种常见问题的解决方案，并详细说明了如何在Vue项目中正确地使用滚动功能。希望本文的介绍能够帮助到遇到同样问题的开发者，让滚动操作在Vue项目中顺利执行。

    js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版

    在JavaScript中，`top`、`clientTop`、`scrollTop`和`offsetTop`都是用于处理元素位置和滚动状态的属性，它们各自有着特定的用途和含义。理解这些属性的区别对于进行网页布局和动态效果的实现至关重要。 1. `...

    深入浅析JavaScript中的scrollTop

    了解scrollTop的基本含义和用法，对于实现网页的动态交互和提高用户体验非常重要。一些常见的应用场景包括：动态加载内容（如实现无限滚动）、实现滚动导航的固定定位、当页面滚动到一定位置时弹出提示或固定内容等...

    关于window.pageYOffset和document.documentElement.scrollTop

    当页面滚动时，这个值也会相应改变，但它可能不适用于所有浏览器，尤其是在一些老版本的IE浏览器中，可能需要使用 `document.body.scrollTop` 来代替。 两者之间的区别在于，`window.pageYOffset` 是一个跨浏览器的...

    JQuery CSS 方法说明

    **jQuery CSS 方法详解** 在Web开发中，jQuery库极大地简化了JavaScript操作，特别是在处理CSS样式方面。本篇文章将深入探讨jQuery中的...在实际项目中，结合使用这些方法，可以构建出各种复杂的页面布局和动画效果。

    jquery的说明文档

    3. **事件处理**：使用 `.on()` 方法绑定事件，如 `$("#element").on("click", function() {...})` 绑定点击事件，`.off()` 方法可以解绑事件。同时，jQuery 提供了 `event.preventDefault()` 和 `event....

    导航菜单下拉隐藏上拉显示源码及说明文档

    在实现这一特效时，开发者可能使用了JQuery的`.scroll()`函数来绑定滚动事件，然后在事件处理函数内部使用`.scrollTop()`方法获取滚动条的垂直位置。当滚动条达到特定阈值时，菜单的隐藏和显示状态就会被更新。同时...

    jQuery实现全屏背景视觉差特效源码.zip

    此外，"使用须知.txt"文件可能包含了关于如何使用这个源码的详细说明，包括如何将代码整合到你的项目中、如何定制效果等。而"132689918327521942"可能是源码文件的ID或其他相关信息，具体需要查看文件内容才能了解...

    jQuery实现的检测滚动条距离顶部百分比效果源码.zip

    在提供的压缩包中，"使用须知.txt"很可能是包含了关于如何使用这段源码的说明，而"132692137284042014"可能是一个JavaScript文件，里面包含了具体的实现代码。解压后，仔细阅读"使用须知.txt"，并查看这个JavaScript...

    javascript事件处理模型实例说明

    与IE不同，火狐以及基于Gecko引擎的浏览器使用 `addEventListener` 和 `removeEventListener` 方法。这两个方法是遵循DOM Level 2标准实现的，不需要在事件类型前加 "on" 前缀。例如，监听点击事件的代码如下： ```...

    jQuery滚动楼层效果代码.zip

    压缩包内的`说明.htm`可能是对这个效果的详细说明和使用指南，而`jiaoben4985.js`可能是包含实现这个效果的jQuery代码。要理解和使用这段代码，你需要熟悉基本的HTML、CSS和JavaScript，以及jQuery库的基本用法。 ...

    js 实现上下滚动

    综上所述，这个压缩包提供了一种使用JavaScript实现上下滚动效果的方法，通过`test10.html`和`marquee.js`可以学习和理解具体的实现细节，而`说明.txt`则为使用这些文件提供了指导。对于想要提升JavaScript技能，...

    jQuery实现的带微博按钮返回顶部效果源码.zip

    开发者可以使用`$(window).scroll()`方法来设置一个回调函数，该函数会在用户滚动页面时触发。在回调函数中，我们可以检查滚动位置，如`$(window).scrollTop()`返回的是页面顶部距离视口顶部的距离。如果这个值超过...

    jQuery超实用返回顶部插件

    ### 使用方法 1. 在HTML文件中引入jQuery库和插件的JS文件。 2. 添加返回顶部按钮的HTML元素，并设置好其CSS样式。 3. 初始化插件，设置相关参数，如显示高度、动画速度等。 4. 绑定事件监听器，让按钮在适当的时候...

    JS实现滚动页面标题文字动态变化特效.zip

    在提供的文件列表中，“使用须知.txt”可能是介绍如何使用代码的说明文件，而“132686969359836739”可能是源代码或示例的文件名，但没有具体的扩展名，因此无法直接确定其内容。如果这是一个JavaScript文件，它可能...

    可自由缩放的jQuery导航菜单

    可以使用jQuery的`.scroll()`方法监听滚动事件，`.animate()`方法进行平滑动画效果，以及CSS属性如`transform: scale()`来改变元素的大小。示例代码可能如下： ```javascript $(window).scroll(function() { var ...

    javascript经典特效---文字向上滚动.rar

    当`top`值小于等于0时，说明元素已经滚动到顶部，此时我们使用`clearInterval`停止滚动。 这个简单的例子只是向上滚动效果的一种实现方式。实际上，你可以根据需求进行更多定制，比如改变滚动速度、方向、动画曲线...

    42、jQuery鼠标滚轮控制页面滑动代码

    而"更多资源.txt"可能包含了与这个话题相关的其他资源链接或说明，你可以查阅以获取更多信息。 总之，利用jQuery的事件监听和DOM操作功能，我们可以轻松实现鼠标滚轮控制页面滑动的效果，为用户提供更加友好的交互...

Magicbox
Global site tag (gtag.js) - Google Analytics