最近想写一个信息滚动的demo,但是一直没有实现,最后查找资料,看了网上的一些例子,之后才明白原因:没有清楚scrollTop的真正含义
html代码:
<div class="info-area" id="area">
<ul id="list">
<li><a href="">菲律宾渔民拖走黄岩岛附近多个中国浮标</a></li>
<li><a href="">2013年我国净资产352万亿 专家称已超美国</a></li>
<li><a href="">5只藏獒集体越狱 特警持微型冲锋枪击毙</a></li>
<li><a href="">社科院副主任：中国能应对1.5次金融危机</a></li>
<li><a href="">舆论场：青年约架被殴 给山东警方依法独立办案点赞</a></li>
<li><a href="">湖北书记：1名优秀县委书记抓反腐 有人扬言整死他</a></li>
<li><a href="">起底公立医院工资：有医生工作17年月薪3000元</a></li>
<li><a href="">监拍夫妻吵架街头撒钞票 路人淡定经过</a></li>
<li><a href="">起底公立医院工资：有医生工作17年月薪3000元</a></li>
<li><a href="">监拍夫妻吵架街头撒钞票 路人淡定经过</a></li>
</ul>
</div>
css代码:
.info-area{overflow: hidden; }
ul{list-style: none; }
li{height: 24px;line-height: 24px; padding-left: 20px;border-top:1px solid #ccc;}
li a{text-decoration: none;}
由于没有设置info-area的高度,所以及时我在js中设置如下内容也没有什么用:
var area = document.getElementById(‘area‘);
var timer = setInterval(‘area.scrollTop++‘,50);
一直以为,scrollTop的意思就是子元素的上边距相对于父元素上边距的距离,之后查了一下资料才明白真正的含义:
- 内层元素的高度300px > 外层元素的高度200px,因此“外层元素的内容”(也就是“内层元素”)无法完全显示，而外层元素把
overflow
设置为auto
，因此外层元素的右侧会出现竖直滑动条 - 初始状态下，“内层元素的上边界”和“外层元素的上边界”重合，没有任何内容超过“外层元素的上边界”，此时scrollTop属性的值为0。
- 当向下拖动滚动块时，超过“外层元素的上边界”的内容会逐渐增多，scrollTop值就等于这些超出部分的高度。
- 当拖动滚动块到最底部时，“内层元素的下边界”和“外层元素的下边界”重合，此时,超过“外层元素的上边界”的内容的高度=300px-200px=100px，也就是此时的scrollTop值。
原来如此.在我自己的demo中,我根本就没有设置父元素的高度,何来超出部分之说呢.
于是加上css部分:.info-area{height:215px;overflow:hidder};
效果马上就出来了.除此之外,scrollTop还有一个小地方值得注意的:
当页面有DTD文档说明时:使用document.body.scrollTop的值总是0.此时需要使用document.documentElement.scrollTop.
页面具有 DTD（或者说指定了 DOCTYPE）时，使用 document.documentElement。
页面不具有 DTD（或者说没有指定了 DOCTYPE）时，使用 document.body。
在 IE 和 Firefox 中均是如此。
为了兼容，可以使用如下代码： var scrollTop = window.pageYOffset
|| document.documentElement.scrollTop
|| document.body.scrollTop
|| 0;