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>
