vue中引入mousewheel事件及其兼容性处理

项目实现过程中需要对一个已经有纵向滚动条的table表格增加鼠标滚轮（mousewheel）事件，方便查看数据；其实现原理与我上一篇博客中的拖动事件类似，利用模拟出来的同一个滚动条来实现，滚动条设置的要点在于：1、滚动条与滚动槽的高度比例应该等于内容区（动态变化）和可视区的高度比例；滚动槽与可视区平齐，高度一样，；滚动条的高度则根据内容的高度等比例计算；2、各元素的定位采用绝对定位，其父元素采用相对定位，这样就能很好地设置样式；

布局与样式做好后，只需要在组件methods注册方法，在元素就位后调用该方法，在方法内部为表格绑定（mousewheel）事件；在这里需要考虑兼容性问题，firefox并不支持mousewheel事件，它对应的鼠标滚动事件为DOMMouseScroll事件，并且该事件仅能通过DOM2级（addEventListener）添加处理程序；并且判断鼠标滚动方向的方式也不一样，firefoxt通过detail属性判断，向前滚动该属性为-3，向后+3；其余浏览器通过wheelDelta属性，向前时为+120的倍数，向后为-120的倍数；具体内容可参考《js高级程序设计》事件一章；添加函数如下：

    scroll(){
        this.wrapDiv = document.getElementById("wrap");
        this.contentDiv = document.getElementById("context-table");
        this.contentDiv1 = document.getElementById("context-table1");
        this.sliderWrap = document.getElementById("sliderWrap");
        this.slider = document.getElementById("slider");
        //设置比例
        let scale =  this.wrapDiv.clientHeight /  this.contentDiv.clientHeight;
        if (scale < 1) {
          this.mouseFlag = true;
          let h1 =  this.sliderWrap.clientHeight * scale;
          h1 = (h1 < 50) ? 50 : h1;
          this.slider.style.height = h1 + "px";/*滚动条高度动态变化*/
          let y = 0;
          let that = this;
          //为firefox添加滚轮事件
          if (document.addEventListener){
            document.addEventListener('DOMMouseScroll',function (e) {
                if(that.mouseFlag){
                  //console.log('scroll');
                  let event1 = window.event|| e;
                  y = (event1.detail > 0) ? y + 8 : y - 8;
                  y = (y < 0) ? 0 : y;
                  let max = that.sliderWrap.clientHeight - that.slider.clientHeight;
                  y = (y > max + 1) ? max + 1 : y;
                  that.slider.style.top = y + "px";
                  scale = that.wrapDiv.clientHeight / that.contentDiv.clientHeight;
                  let y1 = -y / scale;
                  that.contentDiv.style.top = y1 + "px";
                  that.contentDiv1.style.top = y1 + "px";
                }
            },false)
          }
          this.wrapDiv.onmousewheel = function (e) {
            if (scale < 1) {
              let event1 = window.event || e;
              y = (event1.wheelDelta < 0) ? y + 8 : y - 8;
              y = (y < 0) ? 0 : y;/*限定滚动范围*/
              let max =  that.sliderWrap.clientHeight -  that.slider.clientHeight;
              //console.log(scale, y, sliderWrap.clientHeight, slider.clientHeight);
              y = (y > max + 1) ? max + 1 : y;
              that.slider.style.top = y + "px";
              scale =  that.wrapDiv.clientHeight /  that.contentDiv.clientHeight;
              let y1 = -y / scale;
              that.contentDiv.style.top = y1 + "px";
              that.contentDiv1.style.top = y1 + "px";
            }
          }
        }
        else{/*当内容区高度小于等于可视区时，去除绑定的事件和滚动条*/
          this.wrapDiv.onmousewheel =null;
          if(document.addEventListener){
             this.mouseFlag = false;
          }
          this.sliderWrap.style.visibility = 'hidden';
          let height = this.contentDiv.clientHeight;
          tableRight.style.height  = height+72+'px';
          this.wrapDiv.style.height = height+2+'px';
        }
      },

该函数在给firefox绑定的事件解绑时遇到了问题，由于removeEventListener()需要通过句柄来解绑，而addEventListener()通过句柄添加处理函数会导致event参数无法传递的问题；即使在需要解绑时给document绑定空的处理函数也无法覆盖前一个绑定函数；最后只好添加一个标志，在需要解绑函数时改变标志的值；在绑定函数中通过判断该标志的值来确定是否要做操作；

通过上述方式即可很好地实现鼠标滚动事件的效果，并不会有兼容性的问题出现。

注：若仅仅是为表格绑定单一的滚动事件，则可以不显示滚动条，甚至不设置滚动条；滚动条的作用仅仅是用来指示内容区滚动的位置，以及配合拖动事件使用；

vue中引入mousewheel事件及其兼容性处理

猜你喜欢