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;
  }

以上是本章全部的內容