vue el-table 鼠标滚轮 左右滚动

代码

scrollFunction(obj, id) {
            obj = document.getElementById(id)
      
            if (obj.attachEvent) {
              obj.attachEvent('onmousewheel', this.mouseScroll(obj))
            } else if (obj.addEventListener) {
              obj.addEventListener('DOMMouseScroll', this.mouseScroll(obj), false)
            }
            obj.onmousewheel = obj.onmousewheel = this.mouseScroll(obj)
          },
          mouseScroll(obj,callback) {
            return function () {
              let e = window.event || document.all ? window.event : arguments[0] ? arguments[0] : event
              let detail, moveForwardStep, moveBackStep
              let step = 0
              if (e.wheelDelta) { // google 下滑负数: -120
                detail = e.wheelDelta
                moveForwardStep = -1
                moveBackStep = 1    
              } else if (e.detail) { // firefox 下滑正数:3
                detail = event.detail
                moveForwardStep = 1
                moveBackStep = -1
              }
              // 鼠标滚轮距离
               step = detail > 0 ? moveForwardStep * 100 : moveBackStep * 100
               e.preventDefault()
       
           obj.scrollLeft = obj.scrollLeft + step
       
          

            }
          },

然后需要滚动的内容

        
          mounted(){
        // 自己随便设置个id, el-table res="historyTable"
        this.$refs.historyTable.bodyWrapper.id = 'historyshop'
        this.scrollFunction(this.domObj, 'historyshop')
        }


相关内容

发表评论

验证码:
点击我更换图片

最新评论