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

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

else{/*当内容区高度小于等于可视区时，去除绑定的事件和滚动条*/

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

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

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

发布了27 篇原创文章 · 获赞 11 · 访问量 9萬+