引入mousewheel事件及兼容性处理
项目实现过程中需要对一个已经有纵向滚动条的table表格增加鼠标滚轮（mousewheel）事件，方便查看数据；其实现原理与我上一篇博客中的拖动事件类似，利用模拟出来的同一个滚动条来实现
滚动条设置的要点在于
1、滚动条与滚动槽的高度比例 应该等于 内容区（动态变化）和可视区的高度比例；滚动槽与可视区平齐，高度一样；滚动条的高度则根据内容的高度等比例计算；
2、各元素的定位采用绝对定位，其父元素采用相对定位，这样就能很好地设置样式；
布局与样式做好后，只需要在组件methods注册方法，在元素就位后调用该方法，在方法内部为表格绑定（mousewheel）事件；在这里需要考虑兼容性问题，firefox并不支持mousewheel事件，它对应的鼠标滚动事件为dommousescroll事件，并且该事件仅能通过dom2级（addeventlistener）添加处理程序；并且判断鼠标滚动方向的方式也不一样，firefoxt通过detail属性判断，向前滚动该属性为-3，向后+3；其余浏览器通过wheeldelta属性，向前时为+120的倍数，向后为-120的倍数；
具体内容可参考《js高级程序设计》事件一章；添加函数如下：
该函数在给firefox绑定的事件解绑时遇到了问题，由于removeeventlistener()需要通过句柄来解绑，而addeventlistener()通过句柄添加处理函数会导致event参数无法传递的问题；即使在需要解绑时给document绑定空的处理函数也无法覆盖前一个绑定函数；最后只好添加一个标志，在需要解绑函数时改变标志的值；在绑定函数中通过判断该标志的值来确定是否要做操作；
通过上述方式即可很好地实现鼠标滚动事件的效果，并不会有兼容性的问题出现。
注：若仅仅是为表格绑定单一的滚动事件，则可以不显示滚动条，甚至不设置滚动条；滚动条的作用仅仅是用来指示内容区滚动的位置，以及配合拖动事件使用；
关于scroll和mousewheel事件的问题
需要注意的点
火狐的鼠标滚轮事件是dommousescroll
事件参数兼容：e=window.event||e;(下面省略)
preventdefault()函数取消的是默认事件，不会把我们自己添加的事件处理删除
实验开始
在下面验证例子的基础上实验，实验之间代码没有干涉：
1.原样输出
在元素内无论是手动拉动滚动条还是滚动鼠标滚轮，’d’都是无法出现的。而当元素滚动到达顶部或底部的时候，输出的是就有’d’了，但是这个时候并没有输出’b’，说明scroll事件本来就没有发生冒泡。而document的scroll事件是由于其他因素触发的。
2.在element的mousewheel事件处理里把冒泡取消
这时候在元素内滚动鼠标滚轮，’c’始终是无法出现的，说明我们阻止mousewheel事件的冒泡成功了。但是在滚动条到达底部或顶部时，虽然’c’依旧没有出现，但是’d’却出现了，说明这个时候的document的scroll事件是靠element的mousewheel来触发的。
到这里就出现一个问题：element的mousewheel事件在默认处理里对这一情形进行了处理吗？
3.在element的mousewheel事件处理里取消默认处理
这时候在元素内滚动鼠标，只会有’a’、’c’会出现，页面也不会滚动。说明鼠标滚轮滚动element页面的效果是由element的mousewheel默认事件处理来的。这个时候留意实验1中滚轮滚动一下’b’的输出数量，大概就能猜到默认处理的过程。
4.在element的mousewheel里添加一个自己的页面滚动（与默认处理的滚动方向相反）
这个时候在元素内滚动鼠标，你会发现即使滚动到顶部或底部，元素外的页面并不会滚动，且并没有输出’d’，也就是document的scroll事件没有触发。不好的一点是你在滚动到底部或顶部时，继续滚动鼠标的话，元素内还是会滚动，只不过是先下再上（或先上再下）地波动一下。
5.在element的mousewheel里添加一个自己的页面滚动（与默认处理的滚动方向相同）
这个时候在元素内滚动鼠标，你会发现即使滚动到顶部或底部，元素外的页面跟着滚动，且输出’d’，也就是document的scroll事件触发了。
这里需要注意到一点：元素的scrolltop属性是无法无限增加和减少的，到了滚动的顶部或底部后只能反向变化（可以自行输出测试）。
6.在实验5的基础上，将滚动的距离调整到很大
认真观察输出的’b’的个数，和实验1的对比，你会发现这次只有1个’b’，而且还输出了’d’，而且’d’的数量还不少。经过一些其他的实验，得到：默认事件处理里的判断大概如下：
验证例子：
结论：通过上面的6个实验，很容易发现在元素的mousewheel的默认处理事件里对scrolltop属性进行变化和判断，如果没有发生变化就对外部元素进行滚动一下（具体滚动算法不懂，滚动距离和鼠标滚一下是一样的），以此类推，如果下一个元素到边界了，就再下一个。而这个过程和冒泡是没有关系的，只是当前元素的mousewheel默认事件处理进行的。
应用：因此为了实现元素滚动到底时继续滚动却不会使外部元素滚动，我们可以直接取消它的默认处理，然后给一个自己的滚动函数就可以了。至于怎么滚就看自己给什么函数了，而冒泡取不取消也看自己，上面的默认处理在冒泡和捕获阶段是不进行的。
例子如下：
以上为个人经验，希望能给大家一个参考，也希望大家多多支持www.887551.com。
