vue中JS实现内容上下无缝滚动效果

vue中JS实现内容上下无缝滚动效果

现在有个需求当页面载入时实时接口风险板块的内容自动往上无缝滚动，当鼠标停留时滚动停止！

我们开始写方法，在methods中写个scroll方法， 通过document.getElementById来获取当前元素，这里scrollTop获取被选元素的垂直滚动条位置，offsetHeight获取该控件本身的高度，然后设置一个定时器，给定一个时间，这样就实现了自动无缝滚动的效果了

  scroll() {
        let speed = 100;
        let wrapper = document.getElementById('wrapper');
        let list_one = document.getElementById('list_one');
        let list_two = document.getElementById('list_two');
        list_two.innerHTML = list_one.innerHTML;
        console.log(list_one.innerHTML);
        function Marquee() {
          if (list_two.offsetHeight - wrapper.scrollTop <= 0)
            wrapper.scrollTop -= list_one.offsetHeight;
          else {
            wrapper.scrollTop += 1
          }
        }
        let MyMar = setInterval(Marquee, speed);
        wrapper.onmouseover = function () {clearInterval(MyMar)};
        wrapper.onmouseout = function () {MyMar = setInterval(Marquee, speed)};
      }

在mounted()中调用scroll方法

    mounted() {
      this.scroll();
    },

HTML

     <div class="left_chart_wrap chart_box b_img_ranking">
          <div class="common_header">实时接口风险</div>
          <div class="ranking_wrap ranking_roll" id="wrapper">
            <div id="list_one">
              <el-row  class="Interface" v-for="(item,index) in list" :key="index">
                <el-col :span="5">
                  <div class="Interface_img">
                    <img src="../../assets/screen/icon-warning.png" alt="">
                  </div>
                </el-col>
                <el-col :span="19">
                  <el-row class="Interface_padding">
                    <el-col :span="12">{{item.name}}</el-col>
                    <el-col :span="12" class="Interface_date">{{item.date}}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24" class="Interface_text">{{item.text}}</el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
            <div id="list_two"></div>
          </div>
        </div>

CSS

.ranking_roll {
    max-height: 200px;
    overflow: hidden;
  }

以上是本章全部的内容