快捷导航
蚂蚁部落 网站首页 前端教程 JS教程 查看内容

栏目导航

≡基础知识≡

≡操作符≡

≡语句≡

≡函数≡

≡面向对象≡

≡对象≡

≡事件≡

≡事件对象≡

≡操作DOM方法≡

≡操作DOM属性≡

≡操作table表格≡

≡操作select控件≡

≡操作cookie≡

≡浏览器对象模型≡

≡进阶≡

JavaScript scrollTop

2017-12-26 21:17| 发布者: antzone| 查看: 861| 评论: 1|来自: 蚂蚁部落

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

语法结构:

[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的垂直滚动距离,这个距离是滚动条向下滚动的距离,也就是内容位于元素上边缘以外的水平尺寸。

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


鲜花

握手

雷人

路过

鸡蛋
发表评论

最新评论

引用 woshinanhui 2017-12-26 21:36
不错,支持一个

查看全部评论(1)

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2018-1-19 09:09 , Processed in 0.087609 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部