四十、滑鼠滾軸、滾動條事件
阿新 • • 發佈：2018-12-16
一、滑鼠滾軸事件 存在瀏覽器相容問題
說明：當用戶通過滑鼠滾輪與頁面互動、在垂直方向上滾動頁面時(上/下)，就會觸發滾軸事件，且這個事件可以在任何元素上觸發，最終會冒泡到document(IE)或window(Opera、Chrome和Safari)物件。
1.在IE、Opera、Chrome和Safari中滑鼠滾軸事件為：onmousewheel 當轉動滑鼠滾輪時執行指令碼
判斷滾動方向：在mousewheel事件中有一個wheelDelta屬性，當滾軸向上滑動時，其值為120，當滾軸向下滑動時，其值為-120。根據這個屬性返回的值，即可判斷當前滾軸的滑動方向。
2.在火狐中滑鼠滾軸事件為：DOMMouseScroll
判斷滾動方法：在火狐中沒有wheelDelta屬性，但是火狐中存在另一個類似的detail屬性，當滾軸向上滑動時，其值為-3，當滾軸向下滑動時，其值為3。
簡單的測試相容程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body,html{ height: 8000px; width: 100%; } </style> </head> <body> <script> //相容滾軸事件 document.onmousewheel=fun; //IE、Opera、Chrome和Safari if(document.addEventListener){ //火狐 document.addEventListener("DOMMouseScroll",fun); } //執行函式 function fun(event){ event = event || window.event; //相容性 if(event.wheelDelta){ //IE、Opera、Chrome和Safari if(event.wheelDelta>0){ console.log("向上") }else { console.log("向下") } //console.log(event.wheelDelta); }else { //火狐 if(event.detail>0){ console.log("向下") }else { console.log("向上") } //console.log(event.detail); } } </script> </body> </html>
二、滾動條事件 相容主流瀏覽器
onscroll 當滾動元素的滾動條時執行指令碼
繫結事件語法：
1.HTML中： <element onscroll="myScript">
2.JavaScript中：
直接繫結：object.onscroll=function(){myScript};
事件監聽：object.addEventListener("scroll", myScript);
注意： Internet Explorer 8 及更早 IE 版本不支援 addEventListener()
3.jQuery中： $(document).scroll(function(){});