标签：
浏览器差异：firefox滚轮事件是DOMMouseScroll，其他浏览器使用的是mousewheel
firefox事件的event对象使用detail值表示滚轮反向，（-3）表示向上，（3）表示向下。
其他浏览器使用wheelDelta值表示表示滚轮方向，（120）表示向上， （-120）表示向下。
监听事件，删除监听事件：IE678使用attachEvent/detachEvent, 其他浏览器使用addEventListener/removeEventListener。
有Kissy版本和Jquery版本 (不过Jquery的动画有些卡.....)
<!DOCTYPE html>
<html>
<head>
<meta chartset="utf-8"/>
<title></title>
<style type="text/css">
*{padding: 0px; margin: 0px;}
.box{width: 100%;}
.box1,.box3,.box5{background: #ccc;}
.box2,.box4,.box6{background: #cca;}
</style>
</head>
<body>
<div id="dd">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
<div class="box box6"></div>
</div>
<!-- <script src="http://g.tbcdn.cn/kissy/k/1.4.4/seed-min.js"></script> -->
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
// 不同的浏览器有不同的滚轮事件。主要是有两种，onmousewheel（firefox不支持）和DOMMouseScroll（只有firefox支持）;
// 判断滚轮向上或向下在浏览器中也要考虑兼容性，现在五大浏览器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四类使用wheelDelta；两者只在取值上不一致，代表含义一致，detail与wheelDelta只各取两个 值，detail只取±3，wheelDelta只取±120，其中正数表示为向上，负数表示向下。
//addachEvent[应用IE浏览器]，addEventListener[应用非IE浏览器];事件侦听方法，参数【事件，函数，是否冒泡】
</script>
<script type="text/javascript">
// Jquery
$(function(){
var isruning=false,//上锁，判断是否在滚动
nowxh=0;//当前屏数索引
var sc_height=$(window).height();//每一屏的高度
$(‘.box‘).css(‘height‘,$(window).height()+‘px‘);
var length=$(‘.box‘).length;//一共的屏数
// 滚动函数
var scrollFunc=function(e){
e=e || window.event;
if(!isruning){
isruning=true,dir=e.wheelDelta ? e.wheelDelta :e.detail;
if(dir>0){//IE/Opera/Chrome
if(nowxh>0) nowxh-=1;
else nowxh=0;
}else{
if(nowxh<(length-1)) nowxh+=1;
else nowxh=length-1;
}
$("html,body").stop().animate(
{scrollTop:nowxh*sc_height},
‘esea‘,
function(){isruning=false});
e.preventDefault();
}
}
/*注册事件*/
if(document.addEventListener){
document.addEventListener(‘DOMMouseScroll‘,scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
});
</script>
<script type="text/javascript">
// kissy版
// KISSY.use("node,event",function(S,Node,Event){
// var $=S.all;
// var isruning=false,//上锁，判断是否
// nowxh=0;
// var sc_height=$(window).height();
// $(‘.box‘).css(‘height‘,$(window).height()+‘px‘);
// var length=$(‘.box‘).length;
// // var events="mousewheel";
// Event.on(document, "mousewheel",function(e){
// if(!isruning){
// isruning=true,dir=e.deltaY;
// if(dir>0){
// if(nowxh>0)
// nowxh-=1;
// else
// nowxh=0;
// }else{
// if(nowxh<(length-1))
// nowxh+=1;
// else
// nowxh=length-1;
// }
// $(window).animate({"scrollTop":nowxh*sc_height},0.5,"ease",function(){isruning=false});
// // showitemI(nowxh);
// }
// e.preventDefault();
// });
// });
</script>
</body>
</html>
参考文章：js中鼠标滚轮事件详 http://www.cnblogs.com/walkingp/archive/2010/02/03/1662872.html
【Js】鼠标滚轮事件http://www.cnblogs.com/iisoc/archive/2013/01/25/ic-.html
JS 滚轮事件 滚屏效果
标签：
原文地址：http://www.cnblogs.com/kevin26/p/4382994.html
