Why is the scrolling here discontinuous?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新闻滚动</title>
<style>
*{margin:0px;padding:0px}
</style>
</head>
<body>
<p style="height:100px"></p>
<p id="marquee" style="overflow:hidden;height:120px;width:220px;margin-left:20px;">
<p id="marqueecont">
<ul style="margin:0px;list-style:none;">
<li>标题标题标题标题标题标题1</li>
<li>标题标题标题标题标题标题2</li>
<li>标题标题标题标题标题标题3</li>
<li>标题标题标题标题标题标题4</li>
<li>标题标题标题标题标题标题5</li>
<li>标题标题标题标题标题标题6</li>
<li>标题标题标题标题标题标题7</li>
<li>标题标题标题标题标题标题8</li>
<li>标题标题标题标题标题标题9</li>
</ul>
</p>
<p id='marqueecont2'></p>
</p>
<script>
var marquee = document.getElementById('marquee');
var marqueecont = document.getElementById('marqueecont');
var marqueecont2 = document.getElementById('marqueecont2');
MarqTop(marquee,marqueecont,marqueecont2,30);
function MarqTop(marquee,marqueecont,marqueecont2,speed){
marqueecont2.innerHTML=marqueecont.innerHTML;
// 用这个函数这个滚动不连续
function Marquee(){
if(marqueecont.offsetTop<=marquee.scrollTop)
marquee.scrollTop-=marqueecont.offsetHeight;
else{
marquee.scrollTop++;
}
}
// 这个滚动是连续的
/*function Marquee(){
if(marquee.scrollTop>=marqueecont.offsetHeight){
marquee.scrollTop=0;
}else{
marquee.scrollTop++;
}
}*/
var MyMar=setInterval(Marquee,speed);
marquee.onmouseover=function() {clearInterval(MyMar);}
marquee.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
}
</script>
</body>
</html> 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
To make it more intuitive. . I’ll add a few css attributes
Then let’s talk about the reason why continuous scrolling is not possible:
offsetTop is the upper relative distance of the element specified by offsetParent from the current element. . You are referring to the element marqueecont here, but if offsetParent is not specified, then marqueecont.offsetTop is the relative distance between the upper side of marqueecont and the outermost body
So at this time, marqueecont.offsetTop is 100 (if I add a border, it will be 102), because you have a 100-high p on the top...
To directly see the normal effect of modifications:Finally, the p at the top of your HTML structure is too redundant. . After if is changed to the above, the top 100 p can be deleted
The code is too long, can you record the phenomenon as a gif?
It is recommended to take a look at this http://www.cnblogs.com/seven_...
These heights are a bit difficult to understand, just because they are too similar [tears]