vue 无缝滚动，有滚动条切可拖拽

Question

模拟了一个滚动条：如图：

拖动滚动时，需要滚动条和正文同步实时移动，移动的功能实现了，但是实时出了问题，滚动条和正文移动出现了明显的卡顿。请高手指教应该如何处理这两行代码。在线等待

odiv.style.marginTop = top + 'px';
this.$refs.scrollCon.style.marginTop = (-2)*(top/this.scrollBarBF) + 'px';

完整的代码如下：

<div class="con" :style="'height:'+scrollHeight+'px'" @mouseenter="hstop()" @mouseleave="hgo()">
    <div ref="scrollCon" :style="'margin-top: '+ hscrollH +'px;'">
    <div class="tr" v-for="(item, i) in list" :key="i">
        <div class="td td1 textCenter">{{i + 1}}</div>
        <div class="td td2 textCenter">{{item.code}}</div>
    </div>
    <div class="scrollBar">
        <div @mousedown="scrollBarMove" class="bar" :style="'height: '+scrollBarH+'px; margin-top: '+scrollBarM+'px;'"></div>
    </div>
</div>

scrollBarMove(e){
      this.hstop();
          let odiv = e.target;        //获取目标元素
        
        //算出鼠标相对元素的位置
        let disX = e.clientX - odiv.offsetLeft;
        let disY = e.clientY - odiv.offsetTop;
        
        document.onmousemove = (e)=>{
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let top = e.clientY - disY;
      
        //绑定元素位置
//      this.hscrollH = (-2)*(top/this.scrollBarBF);
//      this.scrollBarM = top;

        //移动当前元素
        odiv.style.marginTop = top + 'px';
        this.$refs.scrollCon.style.marginTop = (-2)*(top/this.scrollBarBF) + 'px';
        };
        document.onmouseup = (e) => {
        
        document.onmousemove = null;
        document.onmouseup = null;
        };
    },

发现了原因所在，因为我这个滚动条是自动滚动的，无缝滚动效果：

hgo(){
    var _this = this;
    this.htimer = setInterval(function(){
        if(_this.hscrollH > _this.hscrollMove){
            _this.hscrollH -= 2;
            _this.scrollBarM += _this.scrollBarBF;
        }else{
            _this.hscrollH = 0;
            _this.scrollBarM = 0;
        }
    },50)
},

计时器的频率是50毫秒一次，我修改成500毫秒滚动条的拖拽就没有问题，我观察了CPU和内存使用率，的确是我计时器的问题，继续修复中，请高手继续帮我分析。

Answer 1

问题已经解决，原因是页面计时器频率有点高，从50毫秒改成100毫秒就不会卡顿了。

出现了另外一个问题，与该主题无关，因此帖子结了。

Answer 2

你需要做防抖，可以直接用 lodash 的 debounce，当然自己做一个也很简单