Preface: Recently in my work, I encountered a discontinuous phenomenon caused by a blank at the bottom of the text in a large screen, which was very strange. So I wrote this article to investigate the reasons

Keyword: offsetTop scrollTop offsetHeight

First post an effect picture


        
<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>Continuous text scrolling</title>
    <style>* {margin:0px;padding:0px}   
    </style>

  </head>  
  <body>  
   <div style="height:100px; background-color: rgb(136, 136, 206);"></div>
   <div id="marquee" style="overflow:hidden; height:500px; width:220px; margin-left:20px; background-color: blueviolet;">
      <div id="marqueecont" style="background-color: #c7bcc2;;">
       <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>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
      </ul>
      </div>
      <div id='marqueecont2' style="background-color: #d4a8c2;"></div>
      </div>
        
     <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;
          // Use this function to scroll continuously
          // Marqueecont. offsetTop Distance from the top marquee. ScrollTop Distance of the scroll bar
          function Marquee(){
          if(marqueecont.offsetTop<=marquee.scrollTop) 
          {
            debugger
            marquee.scrollTop = marquee.scrollTop - marqueecont.offsetHeight;
          }
          else{ marquee.scrollTop++; }}var MyMar=setInterval(Marquee,speed);
          marquee.onmouseover=function() {clearInterval(MyMar); } marquee.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
          }

       </script>  
  </body>  
</html>
Copy the code

The core code

OffsetTop is compared with scrollTop

Take a look at the code:

When offsetTop is less than or equal to scrollTop, scrollTop is 0 and the scrollTop returns to its initial position

Note: When scrollTop is negative, the default value is 0

var marquee = document.getElementById('marquee');
var marqueecont = document.getElementById('marqueecont');
// If offsetTop is less than or equal to scrollTop, scrollTop is 0
if(marqueecont.offsetTop<=marquee.scrollTop) {
    marquee.scrollTop = marquee.scrollTop - marqueecont.offsetHeight;
} else{ marquee.scrollTop++; }}Copy the code

It’s a little more intuitive to look at the picture below

offsetHeight

OffsetHeight is the actual height of the scrolling content, as shown in the figure

So marquee. ScrollTop – Marqueecont. offsetHeight is negative, and when scrollTop is negative, it defaults to zero so this is the continuous scrolling text, and the scroll bar is shown here to demonstrate the property overflow: hidden; Changed to overlay display vertical scroll bar

conclusion

  • Continuous scrolling text, mainly according to offsetTop and scrollTop comparison
  • Moving the scroll to the top is also the scroll height of the scroll bar, which completes the loop
  • Combined with the execution of the timer cycle, complete the continuous rolling effect
  • If the value of scrollTop is negative, the maximum value is 0 by default
  • The main problem was that the second div was not assigned a value, which caused the white space to move up to the top before entering the next loop, resulting in a seemingly discontinuous phenomenon

Through the above introduction, I hope to give you some constructive reference, there is any problem welcome harassment, join [front-end assault], long press the TWO-DIMENSIONAL code attention, or wechat search front-end assault together to discuss the boundary of the front end

Welcome to [front-end assault] Falcon assault, grasp the nettle, looking forward to your participation…