【知识点】纵向滚动的元素，避免资源浪费！

简介

页面上有垂直滚动元素和水平滚动元素。由于默认垂直滚动，因此需要区分水平滚动事件。

具体实现

为需要滚动条的标签设置一个id（垂直到水平）（避免重复），然后调用下面的setScoolFun方法（注意是在元素渲染后调用）。

data () {
  return {
    documentObj : null
  }
},
methods: {
   /*容器绑定鼠标滚轮事件*/
      setScroolFun() {
        //绑定的容器
        this.documentObj = document.getElementById(jjListDiv) // 获取DOM元素节点
        // 添加事件（不同浏览器，事件方法不一样，所以可以作判断，也可以如下偷懒）
        this.documentObj.addEventListener(DOMMouseScroll, this.handlerMouserScroll, false)//滚轮事件
        this.documentObj.addEventListener(mousewheel, this.handlerMouserScroll, false)//滚轮事件
      },
      handlerMouserScroll(event) {
        //获取滚轮跨距，兼容获取方式
        let detail = event.wheelDelta || event.detail || event.wheelDeltaY
        /*反向*/
        let moveForwardStep = -1
        /*正向*/
        let moveBackStep = 1
        let step = 0
        //如果跨步大于0，表明正向跨步，将跨步放大100倍，改变滑动速度，如果跨步小于0，表明反向跨步，将跨步放大500倍，改变滑动速度
        step = detail > 0 ? moveForwardStep * 80 : moveBackStep * 80
        /*覆盖当前滚动条的位置,单位是像素，叠增或剃减*/
        this.documentObj.scrollLeft = this.documentObj.scrollLeft + step
        //平滑值(越小越慢，不能小于等于0)
        let slipNum = 0.8
        //末尾值（越小，则越平稳，越大越仓促）
        let endNum = 5
        /*递减步伐值*/
        let decreasingPaceNum = step
        /*速度*/
        let paceNum=60;
        /*效果一*/
        let t = setInterval(() => {
          if (Math.abs(decreasingPaceNum) < endNum) {
            clearInterval(t)
            return
          }
          decreasingPaceNum = decreasingPaceNum * slipNum
          this.documentObj.scrollLeft = this.documentObj.scrollLeft + decreasingPaceNum
        }, paceNum)
        /*效果二*/
        /*for(let i=1;Math.abs(decreasingPaceNum) > endNum;i++){
          decreasingPaceNum = decreasingPaceNum * slipNum
          setTimeout(() => {
            this.documentObj.scrollLeft = this.documentObj.scrollLeft + decreasingPaceNum
          }, i * paceNum)
        }*/
      },
}

注意

页面销毁时，取消事件，避免资源浪费！

完整代码

index.vue

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-380236-1.html