JavaScript implements seamless up and down scrolling effects_javascript skills

The example in this article explains the code of javascript to achieve seamless up and down scrolling, and shares it with everyone for your reference. The specific content is as follows

The principle of js to achieve seamless scrolling up and down is as follows:
1. First set the height or width of the container, then overflow:hidden;
2. After the container height is set, the content will be hidden if it exceeds it.
3. Change the value of the scrollTop (scroll up and down) attribute of the container to move the content up and down by one node (the principle of scrolling);
4. When the scroll height scrollTop is greater than or equal to the height of the node to be scrolled, set scrollTop=0, move the first one in the child node tree to the end, and restart scrolling. The uninterrupted loop scrolling effect will appear.

The rendering 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>
//速度设置
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>

The above is the entire content of this article, I hope it will be helpful to everyone’s study.