本文实例讲解了javascript实现无缝上下滚动的代码，分享给大家供大家参考，具体内容如下

js实现上下无缝滚动的原理是这样的：

1、首先给容器设定高度或宽度，然后overflow:hidden；

2、容器高度设定后，内容超出则被隐藏。

3、改变容器的scrollTop（上下滚动）属性的值，让内容上下移动一个节点的位置（滚动的原理）；

4、到滚动的高度scrollTop大于或等于要滚动节点的高度时，设置scrollTop=0，并把把子节点树中的第一个移动到最后，重新开始滚动，无间断循环滚动效果就出现了。

效果图如下：

代码如下：

<div id="colee"> <div id="colee1"> <p>php</p> <p>java</p> <p>ruby</p> <p>python</p> <p>www.phpddt.com</p> </div> <div id="colee2"></div> </div> <script> //速度设置 var speed=1; 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<=0){ 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>

以上就是本文的全部内容，希望对大家的学习有所帮助。