mousewheel

感谢院长提供
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <title></title>
  5 
  6 <style type="text/css">
  7 
  8 div {
  9     border: 1px solid #000;
 10     overflow: auto;
 11     height: 260px;
 12     width: 300px;
 13 }
 14 
 15 #tester2{
 16     width: 200px;
 17     height: 160px;
 18 }
 19 
 20 </style>
 21 </head>
 22 <body>
 23 No BOM UTF-8 File!
 24 <div id="tester">
 25 prevent<br />
 26 wheel<br />
 27 bubble<br />
 28 
 29 <div id="tester2">
 30 Chrome OK<br />
 31 Opera OK<br />
 32 Firefox OK<br />
 33 aaaa<br />
 34 aaaa<br />
 35 aaaa<br />
 36 aaaa<br />
 37 aaaa<br />
 38 aaaa<br />
 39 aaaa<br />
 40 aaaa<br />
 41 aaaa<br />
 42 aaaa<br />
 43 aaaa<br />
 44 aaaa<br />
 45 aaaa<br />
 46 </div>
 47 
 48 aaaa<br />
 49 aaaa<br />
 50 aaaa<br />
 51 aaaa<br />
 52 aaaa<br />
 53 aaaa<br />
 54 aaaa<br />
 55 aaaa<br />
 56 aaaa<br />
 57 aaaa<br />
 58 aaaa<br />
 59 aaaa<br />
 60 aaaa<br />
 61 </div>
 62 
 63 <script type="text/javascript">
 64 //通用事件增加函数
 65 var addEvent = window.addEventListener ? function(el, name, callback, useCapture){
 66     el.addEventListener(name, callback, !!useCapture);
 67     return callback;
 68 } : window.attachEvent ? function(el, name, callback){
 69     var f = function(e){
 70         e = e || window.event;
 71         callback.call(el, e || window.event);
 72     }
 73     el.attachEvent('on' + name, f);
 74     return f;
 75 } : function(el, name, callback){
 76     el['on' + name] = callback;
 77     return callback;
 78 }
 79 
 80 //取值鼠标滚动时，是使用wheelDelta还是使用detail。
 81 //在webkit和opera中，滚动事件对象都具有这两个属性
 82 //opera中，wheelDelta与detail的关系为：wheelDelta = -40 * detail
 83 //但是在webkit中，detail始终为0，wheelDelta始终120。
 84 //不过此例对最终值不关心，只在值的正负。
 85 //最终定为向下为正，对wheelDeta需修正。
 86 //由于属性的混乱，所以最后只能根据浏览器判定取哪个属性。
 87 //所以采用ua判断浏览器，标记useWheelDelta，最后判断值的取向。
 88 var useWheelDelta = false;
 89 var wheelEventName = 'mousewheel';
 90 navigator.userAgent.replace(/webkit|presto|firefox/i, function(m){
 91     m = m.toLowerCase();
 92     if(m === 'webkit'){
 93         useWheelDelta = true;
 94     } else if(m === 'firefox'){
 95         wheelEventName = 'DOMMouseScroll';
 96     }
 97 })
 98 
 99 var el = document.getElementById('tester');
100 var el2 = document.getElementById('tester2');
101 
102 var
103   el2_preventDefault_down = false    //是否阻止向下滚动的标记
104 , el2_preventDefault_up = true    //是否阻止向上滚动的标记
105 , el2_areaY = el2.scrollHeight - el2.offsetHeight    //可滚动区域大小，用于判断向下滚动是否到头
106 ;
107 
108 addEvent(el2, wheelEventName, function(e){
109     //修正滚动值
110     //正值下 负值上
111     var detail = useWheelDelta ? e.wheelDelta * -1 : e.detail;
112     e.stopPropagation();
113 
114     if(
115         (detail > 0 && el2_preventDefault_down)    //向下滚动 并且 滚动到头了
116         ||    //或者
117         (detail < 0 && el2_preventDefault_up)    //向上滚动 并且 滚动到头了
118         ){
119 
120         console.log('to ' + (detail < 0 ? 'up' : 'down') + ' end');
121 
122         e.preventDefault();
123     }
124 
125 });
126 //scroll在wheel事件触发时还没有发生，
127 //所以需要增加scroll判断某个方向上的滚动结果。
128 //当滚动位置有剩余时，即便单次滚动的单位量大于剩余量
129 //多余的量也不会溢出到父元素。万幸。
130 addEvent(el2, 'scroll', function(e){
131     e.stopPropagation();
132     el2_preventDefault_up = el2.scrollTop <= 0;    //向上滚动到头了
133     el2_preventDefault_down = el2_areaY - el2.scrollTop <= 0;    //向下滚动到头了
134 });
135 
136 </script>
137 
138 </body>
139 </html>