简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Q&A  >  body text

javascript - js common news continuous scrolling

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>
我想大声告诉你我想大声告诉你2711 days ago569

reply all(3)I'll reply

  • 世界只因有你

    世界只因有你2017-05-19 10:42:12

    To make it more intuitive. . I’ll add a few css attributes

     #marquee {
    overflow: auto;/*为了直观的查看滚动量*/
    border: 2px solid;   
  }
  #marqueecont{
    border: 1px solid  #f55;
  }

    Then let’s talk about the reason why continuous scrolling is not possible:

    Because you used the wrong offsetTop

    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...

    Actually, the height you need to completely scroll a marqueecont is 189... When you scroll 100, it will return to 0, which is naturally discontinuous. .

    To directly see the normal effect of modifications: 

    if(marqueecont.offsetHeight<=marquee.scrollTop)

    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

    reply
    0
  • PHP中文网

    PHP中文网2017-05-19 10:42:12

    The code is too long, can you record the phenomenon as a gif?

    reply
    0
  • 大家讲道理

    大家讲道理2017-05-19 10:42:12

    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]

    reply
    0
  • Cancelreply