原生js实现文字循环向上滚动效果

原生js实现文字循环向上滚动效果

css样式 (最外层的div的高度不要太高,也不要正好包含内容区域的高度，最好比内容区域高度低点，产生滚动条)

   #scrollArea {
        width: 400px; 
        height: 150px; 
        border: 2px solid blue; 
        overflow: hidden
      }

html结构部分

   <div id="scrollArea">
      <ul>
        <li>生存，就是最谨慎的战斗。</li>
        <li>到达胜利之前，无法回头。</li>
        <li>净化的终点是自我毁灭。</li>
        <li>没有永恒的朋友，只有永恒的利益。</li>
        <li>不能击败我的，会让我更强大。</li>
        <li>静如影，疾如风。不动如山，迅烈如火。</li>
        <li>别在来不及的时候后悔。</li>
        <li>最好的剑，永远是下一把。</li>
      </ul>
    </div>

js部分

/**
       * scrollTop  (滚动的高度既能‘设置'滚动值，也能‘获取'滚动值)
       * clientHeight 元素的像素高度，包含元素的高度+内边距，不包含水平滚动条，边框和外边距
       * scrollHeight 元素内容的高度，包括溢出的不可见内容
       */
      //时间间隔
      var delay = 50
      //定时器任务
      var handler = function () {
        //向上移动1px
        $('#scrollArea').scrollTop = $('#scrollArea').scrollTop + 1
        if (Math.ceil($('#scrollArea').clientHeight + $('#scrollArea').scrollTop) >= $('#scrollArea').scrollHeight) {
          var ulCopy = $('#scrollArea').firstElementChild.cloneNode(true)
          $('#scrollArea').append(ulCopy)
          //当克隆的ul达到一定数量时，删除第一个ul
          if (document.getElementsByTagName('ul') && document.getElementsByTagName('ul').length >= 3) {
            $('#scrollArea').removeChild($('#scrollArea').firstElementChild)
          }
        }
      }
      //启动定时器
      setInterval(handler, delay)
      function $(selector) {
        return document.querySelector(selector)
      }