关于js中的scrollTop

标签：

  最近想写一个信息滚动的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;

关于js中的scrollTop

标签：

原文地址：http://my.oschina.net/sunshinewyf/blog/484918