Thoroughly understand JS seamless code scrolling

I have to scroll through the code and it's seamless for half a day.
We are determined to solve this problem. It is not difficult to study the code below:

Program code

Copy codeThe Code is as follows: <div id = demo style = overflow: auto; height: 180; width: 200; background: #009900; color: #006600>
<Table align = top>
<Tr>
<Td id = demo1 valign = top>

<P> aaaaaaaaaaa </p>
<P> aaaaaaaaaaa </p>
<P> aaaaaaaaaaa </p>
<P> aaaaaaaaaaa </p>
<P> aaaaaaaaaaa </p>
<P> aaaaaaaaaaa </p>


</Td>
</Tr>
<Tr>
<Td id = demo2 valign = top> </td>
</Tr>
</Table>

</Div>
<Script>
Var speed = 15
Demo2.innerHTML = demo1.innerHTML // clone demo1 to demo2
Function Marquee (){
If (demo2.offsetHeight-demo. scrollTop <= 0) // when rolling to the junction of demo1 and demo2
Demo. scrollTop-= demo1.offsetHeight // The demo jumps to the top
Else {
Demo. scrollTop ++ // if it is horizontal, change all height top to width left.
}
}
Var MyMar = setInterval (Marquee, speed) // set the timer
Demo. onmouseover = function () {clearInterval (MyMar)} // clear the timer when you move the cursor up to stop scrolling.
Demo. onmouseout = function () {MyMar = setInterval (Marquee, speed)} // reset the timer when you move the cursor away
</Script>



Copy to an HTM file to run.