由offsetTop引起的js无缝滚动只滚动一次的临时解决办法

今天有个分公司设计师投诉，问题是他在网上找到的js无缝滚动插入页面后，ff只滚动一次就停止了！

开始以为是公司自有产品的js冲突引起的，但是如果将代码插入到页面上方，问题就解决了；插入到页面中部问题就复现了。

经过与代码的激烈拉锯战，最后发现，原来造成这个问题的原因竟然是js里面用到的一个属性值：offsetTop！

代码先上：

<div id="demo" onmouseout="inter=setInterval(qswhMarquee,30)" onmouseover="clearInterval(inter)" style="height: 219px; overflow: hidden;">

<!--此处为滚动原始内容开始-->
    <div id="demo1">
        <p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p>
    </div>

<!--此处为滚动原始内容结束-->

<!--此处为复制内容开始-->
    <div id="demo2">
        &nbsp;</div>

<!--此处为复制内容结束-->
</div>
<script> 
var t=getid("demo"),t1=getid("demo1"),t2=getid("demo2"),sh=getid("show"); 
var inter; 
t2.innerHTML=t1.innerHTML; 
function qswhMarquee(){ 
if(t2.offsetTop<=t.scrollTop) 
t.scrollTop-=t1.offsetHeight; 
else 
t.scrollTop++; 
} 
inter=setInterval(qswhMarquee,30); 
function getid(id){ 
return document.getElementById(id); 
} 
</script>

以下为个人理解，如有高手发现有误，请不吝赐教，板儿砖拍轻点儿哟！呵呵呵

  offsetTop

   1、当元素的父容器没有指定定位方式时，指元素与body元素之间的偏移距离；

   2、当对父容器指定定位方式（如：position：relative；）时，则指元素与父容器之间的偏移距离；

 

所以，当没有指定定位方式时，代码中的t2.offsetTop值已经是元素demo2与body元素之间的偏移距离了。当这部分代码置入页面上方top：0处时，自然没有问题。但是，如果插入到页面下方时，t2.offsetTop值就已经不再是top：0了，自然就出现位移偏差了，以致滚动执行不正确！

 

网上找了张图，很清晰地指出了元素的类似属性值与区别。提供给大家共勉！哈哈哈

 

 

 

 

http://hi.baidu.com/kiky_zhang/blog/item/abe314de935e504acdbf1abd.html