如何通过JS实现向上滚动跑马灯效果及现有代码问题修复

问题根因说明 #

• 问题一异常原因：你代码中传入的单行高度参数h=40和实际CSS中滚动容器.kenban_wrap的30px高度、单行p标签的实际高度不匹配，导致scrollTop%h的滚动停止条件计算错误，就会出现连续滚动两条、停止位置偏离居中的问题。
• 问题二异常原因：原代码没有提前判断文本段落的数量，不管有几条内容都会直接启动滚动逻辑。

修复后完整代码 #

CSS代码

.kanban {
  position: absolute;
  margin: 0 auto;
  width: 278px;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
}
.kanban .kenban_wrap {
  height: 30px; /* 滚动容器可视高度，和单行p高度保持一致 */
  overflow: hidden;
  line-height: 30px; /* 行高等于容器高度，保证单行内容垂直居中 */
}
.kanban .kanban_info {
  margin: 0;
  padding: 0;
  height: 30px; /* 单行内容高度和容器可视高度一致 */
}

JS代码

function slideLine(box,stf,delay,speed,h)
{
    var slideBox = document.getElementById(box);
    // 先获取所有段落，数量小于2直接不执行滚动
    var items = slideBox.getElementsByTagName(stf);
    if(items.length < 2) return;
    var delay = delay||1000,speed = speed||20,h = h||30; // 默认高度改成和CSS匹配的30
    var tid = null,pause = false;
    var s = function(){tid=setInterval(slide, speed);}
    var slide = function(){
        if(pause) return;
        slideBox.scrollTop += 1;
        if(slideBox.scrollTop%h == 0){
            clearInterval(tid);
            slideBox.appendChild(items[0]);
            slideBox.scrollTop = 0;
            setTimeout(s, delay);
        }
    }
    setTimeout(s, delay);
}
// 传入的h参数改成和CSS一致的30
slideLine('kanban_info','p',1000,25,30);

HTML代码（和原有代码保持一致即可）

<div class="kanban">
  <div class="kenban_wrap" id='kanban_info'>
      <p class="kanban_info">hello</p>
      <p class="kanban_info">world</p>       
      <p class="kanban_info">javascript</p>     
      <p class="kanban_info">HTML</p>
      <p class="kanban_info">CSS</p>
  </div>
</div>

验证说明 #

如果滚动容器里只有1条p标签，代码会直接终止执行，不会触发滚动；2条及以上时，每滚动完一条内容会停留1秒再继续下一次滚动，停止时内容会保持在容器居中位置。

内容的提问来源于stack exchange，提问作者AWEI