JS 滚轮事件滚屏效果

浏览数：23 / 时间：2015年06月09日

浏览器差异：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://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 滚轮事件滚屏效果