文章导航

JavaScript scrollTop

2017-12-26 21:17| 作者: antzone| 查看: 1835| 评论: 2|来自: 蚂蚁部落

此属性用来设置或者返回指定元素在垂直方向滚动条向下滚动的距离。

语法结构:

[JavaScript] 纯文本查看 复制代码
dom.scrollLeft=num

特别说明:

(1).滚动条向下滚可以将元素的内容遮挡于元素的上边缘以外。

(2).滚动条向下滚动的视觉距离和实际被遮挡的内容实际尺寸是有差距的。

(3).滚动条可以设置为可见也可以是不可见的。

(4).只有内容的高度超过元素的高度,此属性才会生效。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#main{
  width:200px;
  height:100px;
  background-color:green;
  margin:0px auto;
  overflow:auto;
}
#inner{
  width:100px;
  height:300px;
  margin-top:20px;
  background-color:red;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
  var omain=document.getElementById("main");
  var oinner=document.getElementById("inner");
  function add() {
    omain.scrollTop++;
  }
  setInterval(add,10);
}
</script> 
</head>
<body> 
<div id="main">
  <div id="inner">蚂蚁部落欢迎您,只有奋斗才会有美好的未来</div>
</div>
</body>
</html>

由以上代码可以看出,scrollTop属性是设置的main的垂直滚动距离,这个距离是滚动条向下滚动的距离,也就是内容位于元素上边缘以外的水平尺寸。

特别注意:滚动条向下滚动的视觉距离和内容位于元素上边缘以外的水平尺寸是有差距的,同时此属性是可读写。


鲜花

握手

雷人

路过

鸡蛋
发表评论

最新评论

引用 admin 2018-2-17 20:53
woshinanhui: 不错,支持一个
非常感谢对蚂蚁部落的支持
引用 woshinanhui 2017-12-26 21:36
不错,支持一个

查看全部评论(2)

返回顶部