本文實例為大家分享了js滾輪事件的具體代碼，供大家參考，具體內容如下
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; } </style> <script type="text/javascript"> window.onload = function(){ //使div可以跟隨鼠標滾輪滾動來改變高度 //滾輪向下滾，div變高 滾輪向上滾 div變短 //獲取box1 var box1 = document.getElementById("box1"); /* * onmousewheel * - 鼠標滾輪滾動的事件，但是該事件火狐瀏覽器并不支持 * - 在火狐中需要使用DOMMouseScroll，這個事件只能通過addEventListener()來綁定 */ //為box1綁定一個鼠標滾輪滾動的事件 box1.onmousewheel = function(event){ event = event || window.event; //判斷滾輪滾動的方向 /* * wheelDelta * - 事件對象中的屬性，可以用來判斷鼠標滾輪滾動的方向 * - 向下滾 -120 向上滾 +120 * - 該屬性的值并不重要，重要的是值的符號，需要通過符號來判斷滾動的方向 * - 但是該屬性火狐瀏覽器并不支持 */ //alert(event.wheelDelta); /* * 火狐中通過detail來判斷方向 * - 向上滾 -3 向下滾 +3 */ //alert(event.detail); if(event.wheelDelta < 0 || event.detail > 0){ //向下滾 //增加box1的高度 box1.style.height = box1.offsetHeight + 10 + "px"; }else{ //向上滾 //減小box1的高度 box1.style.height = box1.offsetHeight - 10 + "px"; } /* * 使用addEventListener()綁定的事件，不能通過return false來取消默認行為 * 需要調用事件對象 preventDefault()方法來取消默認行為 * 但是在IE8中沒有該方法 */ event.preventDefault && event.preventDefault(); //當頁面中有滾動條時，由于滾輪滾動的默認行為會導致頁面整體下移 //取消默認行為 return false; }; bind(box1 , "DOMMouseScroll" , box1.onmousewheel); }; function bind(obj , eventStr , callback){ if(obj.addEventListener){ //如果是正常瀏覽器 obj.addEventListener(eventStr , callback , false); }else{ //IE8 obj.attachEvent("on"+eventStr , function(){ callback.call(obj); }); } } </script> </head> <body style="height: 3000px;"> <div id="box1"></div> </body> </html>
新聞熱點
疑難解答
圖片精選
