列表自动滚动

实现功能：列表自动滚动，鼠标进入停止滚动，鼠标滚轮可滑动查看

注：vite不能使用datav

 

　　　　　　<div @mousewheel.prevent="wheel" @mouseover="mouseOver" @mouseleave="mouseLeave">

            <ul class="infinite_list" ref="scorll" infinite-scroll-distance="0" style="overflow:hidden">

              <li v-for="(item,index) in rankingList" class="infinite-list-item" :key="index">

                <span style="color:#1AFCFF;font-weight: bold;width: 61px;font-family: DIN-Bold;">NO.{{index +1}}</span>

                <el-tooltip :disabled="!tipDisabled" class="item" effect="dark" :content="item.name" placement="top">

                  <span style="width:116px;" @mouseenter="visibilityChange($event)">{{item.orgName}}</span>

                </el-tooltip>

                <span style="width:47px;" @mouseenter="visibilityChange($event)">{{item.total}}</span>

              </li>

            </ul>

          </div>

tipDisabled初始值为false,

scrollStart初始值为0,

scrollEnd初始值为43,即为li的高度

页面加载完成后就要开始调用this.setIntervalFn()

　　setIntervalFn(){
      this.timer = setInterval(()=>{
        this.$refs.scorll.scrollTo(this.scrollStart,this.scrollEnd)
        this.scrollStart+=43;
        this.scrollEnd+=43;
        //滚动距离小于 dom总高度 - 显示的4条数据dom的高度时，重新开始滚动
        if(this.$refs.scorll.scrollTop > 43 * (this.rankingList.length -4)){
          this.$refs.scorll.scrollTop =0
          this.scrollStart=0;
          this.scrollEnd=43;
        }
      },1500)
    },
    mouseOver(){
      clearInterval(this.timer);
    },
    mouseLeave(){
      this.setIntervalFn();
    },
    visibilityChange(event) {
      this.tipDisabled = this.isEllipsis(event.target);
    },
    isEllipsis(dom) {
      var checkDom = dom.cloneNode(), parent, flag;
      checkDom.style.width = dom.offsetWidth + 'px';
      checkDom.style.height = dom.offsetHeight + 'px';
      checkDom.style.overflow = 'auto';
      checkDom.style.position = 'absolute';
      checkDom.style.zIndex = -1;
      checkDom.style.opacity = 0;
      checkDom.style.whiteSpace = "nowrap";
      checkDom.innerHTML = dom.innerHTML;
      parent = dom.parentNode;
      parent.appendChild(checkDom);
      flag = checkDom.scrollWidth > checkDom.offsetWidth;
      parent.removeChild(checkDom);
      return flag;
    },
    wheel(e){
     this.scrollEnd = this.scrollEnd - e.wheelDelta;
     if(this.scrollEnd < 0){
      this.scrollEnd = 0;
     }
     if(this.scrollEnd > 43 * (this.rankingList.length -4)){
      this.scrollEnd = 43 * (this.rankingList.length -4)
     }
      this.$refs.scorll.scrollTo(this.scrollStart,this.scrollEnd)
   },