JS原生实现连续滚动文字

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

关键字： 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++;}}

再看下图更直观些