JS实现文字向上循环滚动特效

html代码

<div class="scrollBox">
  <h3 class="map-content-title">
      恭喜以下用户抢注成功
  </h3>
  <div id="scrolldiv"  class="scroll">
    <ul id="scroll1">
      <li>刚才 <span class="phone">135****2238 周女士</span><span class="place">广东省深圳市***号</span></li>
      <li>1分钟前 <span class="phone">135****2238 张先生</span><span class="place">广东省深圳市南山**号</span></li>
      <li>3分钟前 <span class="phone">135****2238 王女士</span><span class="place">广东省深圳市***号</span></li>
      <li>5分钟前 <span class="phone">135****2238 杜女士</span><span class="place">广东省深圳市***号</span></li>
      <li>11分钟前 <span class="phone">135****2238 柳先生</span><span class="place">广东省深圳市***号</span></li>
      <li>2分钟前 <span class="phone">135****2238 王先生</span><span class="place">广东省深圳市***号</span></li>
      <li>7分钟前 <span class="phone">135****2238 谢女士</span><span class="place">广东省深圳市***号</span></li>
      <li>刚才 <span class="phone">135****2238 李先生</span><span class="place">广东省深圳市***号</span></li>
      <li>3分钟前 <span class="phone">135****2238 何先生</span><span class="place">广东省深圳市***号</span></li>
      <li>6分钟前 <span class="phone">135****2238 伍先生</span><span class="place">广东省深圳市***号</span></li>
      <li>1分钟前 <span class="phone">135****2238 邓先生</span><span class="place">广东省深圳市***号</span></li>
      <li>1分钟前 <span class="phone">135****2238 丁女士</span><span class="place">广东省深圳市***号</span></li>
    </ul>
    <ul id="scroll2"></ul>
  </div>
</div>

文字向上滚动css代码

/* 下单滚动展示 */
.scrollBox{
    padding: 1rem .5rem .5rem .5rem;
    overflow: hidden; 
    background: #fff;
}
#scrolldiv{
    height: 4rem;
    overflow: hidden;
}
#scrolldiv ul li{
    line-height:1.25rem;
    font-size:.75rem;
    color:#666;
    text-align: center;
    font-family: 'pingfang sc';
    font-weight:normal;
}
#scrolldiv ul li span.phone{
    padding-right:1rem;
}

文字向上滚动js代码

window.onload = roll(60);//括号内数字为滚动速度，可根据需要进行调整

function roll(t) {
    var scroll1 = document.getElementById("scroll1");
    var scroll2= document.getElementById("scroll2");
    var scrolldiv = document.getElementById("scrolldiv");
    scroll2.innerHTML = scroll1.innerHTML;
    scrolldiv.scrollTop = 0;
 setInterval(rollStart, t);
}

function rollStart() {
    if (scrolldiv.scrollTop >= scroll1.scrollHeight) {
        scrolldiv.scrollTop = 0;
    } else {
        scrolldiv.scrollTop++;
    }
}