JS原生实现连续滚动文字

1,940 阅读3分钟

前言:最近在工作中遇到,文字在大屏中,出现底部有留白导致不连续的现象,很奇怪,故写这篇文章细究其原因

关键字: offsetTop scrollTop offsetHeight

首先贴个效果图

来看下代码怎么做到的

<!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>  
   <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;
          // 用这个函数这个滚动连续
          // marqueecont.offsetTop 距离顶部的距离 marquee.scrollTop 滚动条滚动的距离
          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>

核心代码

offsetTop与scrollTop作比较

看下代码:

offsetTop 小于等于 scrollTop时 scrollTop至为0,此次滚动条回到初始位置

注: 这里面scrollTop为负值时,默认至为0

var marquee = document.getElementById('marquee');
var marqueecont = document.getElementById('marqueecont');
// offsetTop 小于等于 scrollTop时 scrollTop至为0
if(marqueecont.offsetTop<=marquee.scrollTop) {
    marquee.scrollTop = marquee.scrollTop - marqueecont.offsetHeight;
} else { marquee.scrollTop++;}}

再看下图更直观些

offsetHeight

offsetHeight为滚动内容实际的高度,如图

所以marquee.scrollTop - marqueecont.offsetHeight为负数,scrollTop为负值时,默认会至为0 至此连续滚动的文字就这么实现了,上面显示滚动条是为了演示属性overflow: hidden;改为了overlay显示垂直滚动条

总结

  • 连续滚动文字,主要是根据offsetTop和scrollTop进行比对
  • 滚动内容移动到顶部也是滚动条的滚动高度,此时完成一次循环
  • 结合定时器周期的执行,完成连续的滚动效果
  • scrollTop为负值时,默认至为0
  • 工作中主要遇到的问题是,第二个div未给赋值,导致是空白上移到顶部才进入下一个循环,导致看上去不连续的现象

通过上面的介绍,希望给你一些建设性的参考,有任何问题欢迎骚扰,加入【前端突击】,长按二维码关注,或微信搜索 前端突击 一起探讨前端的边界

欢迎关注,【前端突击】猎鹰突击,迎难而上,期待你的加入...