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

以上是本章全部的内容

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值