JavaScript to achieve seamless scrolling effect _javascript skills

This article illustrates the JavaScript implementation of seamless scrolling code, shared for everyone to reference, the specific contents are as follows

JS to achieve the principle of seamless scrolling up and down is this:
1, first to the container set height or width, and then Overflow:hidden;
2, the container height is set, the content is exceeded is hidden.
3, change the container scrolltop (up and down) attribute value, let the content move up and down a node position (rolling principle);
4, to scroll the height of scrolltop is greater than or equal to the height of the node to be scrolled, set the Scrolltop=0, and the first node in the tree to move to the end, restart the rolling, Non-stop cycle scrolling effect appears.

The effect chart is as follows:

The code is as follows:

 <div id=" Colee "style=" overflow:hidden;height:100px;width:410px;border:1px Solid Red; " > <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>//Speed set var speed=1;
var Colee2=document.getelementbyid ("Colee2");
var Colee1=document.getelementbyid ("Colee1");
var Colee=document.getelementbyid ("Colee"); colee2.innerhtml=colee1.innerhtml;
 Clone colee1 is Colee2 function Marquee1 () {//when scrolling to Colee1 and colee2 if (colee2.offsettop-colee.scrolltop<=0) { Colee.scrolltop-=colee1.offsetheight;
Colee jumps to the top}else{colee.scrolltop++}} var mymar1=setinterval (marquee1,speed)//Set timer//mouse to remove timer to achieve scrolling stop Colee.onmouseover=function () {clearinterval (MYMAR1)}//Reset timer colee.onmouseout=function () {mymar1=setinterval () when Mouse is moved ( marquee1,speed)} </script> 

The above is the entire content of this article, I hope to help you learn.