- <div id="colee" style="overflow:hidden;height:100px;width:200px;">
- <div id="colee1">
- 我是滚动内容1
- 我是滚动内容2
- 我是滚动内容3
- 我是滚动内容4
- 我是滚动内容5
- 我是滚动内容6
- 我是滚动内容7
- 我是滚动内容8
- 我是滚动内容9
- </div>
- <div id="colee2"></div>
- </div>
- <script type="text/javascript">
- var speed = 30;
- var colee2 = document.getElementById("colee2");
- var colee1 = document.getElementById("colee1");
- var colee = document.getElementById("colee");
- colee2.innerHTML = colee1.innerHTML; //克隆colee1为colee2
- function Marquee1() {
- //当滚动至colee1与colee2交界时
- if (colee2.offsetTop <= colee.scrollTop) {
- colee.scrollTop -= colee1.offsetHeight; //colee跳到最顶端
- } else {
- colee.scrollTop++;
- }
- }
- var MyMar1 = setInterval(Marquee1, speed)//设置定时器
- //鼠标移上时清除定时器达到滚动停止的目的
- colee.onmouseover = function() { clearInterval(MyMar1) }
- //鼠标移开时重设定时器
- colee.onmouseout = function() { MyMar1 = setInterval(Marquee1, speed) }
- </script>
解决办法：
查资料得知跟offsetTop有关系：
2、当对父容器指定定位方式（如：position：relative；）时，则指元素与父容器之间的偏移距离；
所以，当没有指定定位方式时，代码中的colee2.offsetTop值已经是元素colee2与body元素之间的偏移距离了。当这部分代码置入页面上方top：0处时，自然没有问题。但是，如果插入到页面下方时，colee2.offsetTop值就已经不再是top：0了，自然就出现位移偏差了，以致滚动执行不正确！
所以只需在colee的css样式中加入"position:absolute"即可。
即：
- <div id="colee" style="overflow:hidden;height:100px;width:200px;position:absolute;">