javascript滚动条响应鼠标滑轮的实现上下滚动事件

实现鼠标滚动滚轮事件：

<script type="text/javascript"><pre name="code" class="javascript">var scrollFunc=function(e){ e=e || window.event; if(e.wheelDelta){//IE/Opera/Chrome if(e.wheelDelta==120){//向上滚动事件alert(e.wheelDeta +"向上");}else{ //向上滚动事件alert(e.wheelDeta +"向上");} }else if(e.detail){//Firefox if(e.detail==-3) { //向上滚动事件<br> alert(e.detail +"向上");}else { //向下滚动事件<br>alert(e.detail +"向下 ");} } };if(document.addEventListener){ //adding the event listerner for Mozilladocument.addEventListener("DOMMouseScroll" ,scrollFunc, false);}//IE/Opera/Chrome window.onmousewheel=document.onmousewheel=scrollFunc;</script>

还有另一种方法：

使用jquery.mousewheel.js插件，个人觉得这个挺好用，类似与jQuery封装了，解决了个浏览器的兼容性：

使用如下：

1. 首先导入jquery.mousewheel.js文件

2. 在你要使用的区域内添加mousewheel事件

<pre name="code" class="javascript"><pre name="code" class="javascript"> $(function (){ $("#XXXX").bind("mousewheel", function(event) {event.preventDefault();if(event.deltaY=="-1"){//向下滚动事件<br>}else{//向上滚动事件}});});