用js来实现公告栏文字上下滚动效果，可添加新数据（简单）

大家好我是菜鸟前端学有引力，这是我的第一篇文章，我希望把我在工作上遇到的一些业务问题和解决方法教给大家，如果有错误和不足，希望大家多多交流指正~

正片：

今天老板来需求了！要求要在网页上方加一个实时更新数据的滚动公告栏，具体需求是什么呢：

1. 可以像公告栏一样，滚动数据，把滚动数组里面的数据展示

2. 每间隔一段时间调用一次接口获取最新滚动数据，比对新旧数组，如果有新的数据要添加在尾部让其滚动展示

简单来说就是滚动展示数据，有新的数据添加进旧数组的尾部并滚动。

而滚动的思路是通过外层div的srcollTop属性值递增来实现的，废话不多说我们上代码！

1.html

      <!-- 大div -->
      <div class="scrollBox">
        <!-- 外层div用于通过其scrollTop属性实现滚动 -->
        <div class="s-outsideBox" id="box">
        <!-- 内层div用于比较滚动距离判断滚动暂停或继续 -->
          <div id="list">
            <!-- 遍历滚动数组 -->
            <div
              class="s-list"
              v-for="(item,index) in scrollList"
              :key="item.id"
            >
            <!-- 展示滚动数据 -->
              <span class="s-item flex">{
   {item.title}}</span>
            </div>
          </div>
        </div>