一、鼠标滚轴事件 存在浏览器兼容问题
说明:当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时(上/下),就会触发滚轴事件,且这个事件可以在任何元素上触发,最终会冒泡到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 οnscrοll="myScript">
2.JavaScript中:
直接绑定:object.οnscrοll=function(){myScript};
事件监听:object.addEventListener("scroll", myScript);
注意: Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。
3.jQuery中: $(document).scroll(function(){});