firefox使用DOMMouseScroll,其他浏览器使用mousewheel
当滚动时获取wheelDelta值，firefox使用detail:值为下滚3上滚-3,其他浏览器使用wheelDelta:值为下滚-120上滚120，通过判断其值为正或者负即可判断鼠标滚轮上滚还是下滚
js的写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>滚轮上下滑动的兼容性</title>
</head>
<body>
<label>IE/Opera/谷歌、360<input type="text" id="wheelDelta"></label>
<label>(火狐）滚动值： <input type="text" id="detail"></label>
<script type="text/javascript">
var scrollFn = function (e) {
e = e || window.event;
var t1 = document.getElementById('wheelDelta');
var t2 = document.getElementById('detail');
if (e.wheelDelta) {//IE/Opera/Chrome
t1.value = e.wheelDelta;
}else if(e.detail){//火狐
t2.value = e.detail;
}
}
// 通过事件监听给元素绑定一个事件
/*
addEventListener() 用于向指定元素添加事件。
可以向一个元素添加多次事件或者多次不同事件，后面的事件是不会覆盖前面的。
element.addEventListener(event,fn,useCaption );
参数说明：tr件，比如 click mouseenter mouseleave
fn 回调函数
useCaption 用于描述是冒泡还是捕获。默认值是false，即冒泡传递。
当值为true，就是捕获传递。
*/
if (document.addEventListener) {
document.addEventListener('DOMMouseScroll',scrollFn,false);
}
// w3c
window.onmousewheel=document.onmousewheel=scrollFn;//IE/Chrome/360/Opera
</script>
</body>
</html>
二 js写法二：
var scrollfns = function(e){
e = e || window.event;
if (e.wheelDelta) {
if (e.wheelDelta > 0) {
console.log('IE/Opera上滚');
}else{
console.log('IE/Opera下滚');
}
}else if (e.detail) {
if (e.detail > 0) {
console.log('火狐上滚');
}else{
console.log('火狐下滚');
}
}
}
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollfns,false);
};
//w3c
window.onmousewheel=document.onmousewheel=scrollfns;
三 jquery滚轮事件的写法：通过判断滚动条卷进去的距离来判断
var p=0;
$(window).scroll(function(){
// e = e || window.event;
p = $(this).scrollTop();
if (p>0) {//0表示卷进去的距离为0
alert('下滚');
}else{
alert('上滚');
}
});
jquery写法demo：
$(window).scroll(function(){
p = $(this).scrollTop();
if (p>0) {
// alert('下滚');
$('#leftcon').css({
'top':'60px'
});
/* $('#leftcon').animate({
'top':'0'
},1000);*/
}
if (p<=0) {
// alert('上滚');
// removeAttr('style')移除元素属性
$('#leftcon').css({'top':'160px'});
}
});
2030
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
