jQuery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jQuery的滚轮事件插件
jQuery.mousewheel.js
2.函数节流
JavaScript中有些事件的触发频率非常高，比如onresize事件（jq中是resize），onmousemove事件（jq中是mousemove）以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数，可以巧妙地使用定时器来减少触发的次数，实现函数节流。
例子：整屏滚动
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滚轮事件</title>
<script type="text/javascript" src="../jQuery库/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../jQuery库/jquery.mousewheel.js"></script>
<link rel="stylesheet" type="text/css" href="../CSS3/wheelstyle.css">
<script type="text/javascript">
/*$(window).mousewheel(function(event,data){ ???鼠标滚轮向上1，向下-1 ???alert(data); ???console.log(data);*//*})*/$(function(){ ???var $screen = $(‘.pages_con‘); /*获取整个父级div*/ ???var $pages = $(‘.pages‘); ?????/*获取页面div*/ ???var $h = $(window).height(); ??/*视窗的高度*/ ???//alert($h); ???var $nowscreen = 0; ????????????/*刷新次数变量*/ ???var $len = $pages.length; ??????/*有多少个页面div*/ ???var $points = $(‘.points li‘); ?/*获取li*/ ???var timer = null; ??????????????/*定时变量为空值*/ ???$pages.css({‘height‘:$h}); ?????/*修改页面样式，高度设为可视窗口大小*/ ???$points.click(function(){ ??????/*点击li即小圆点，执行*/ ???????$nowscreen = $(this).index(); ?/*刷新次数变量=点击的数值*/ ???????/*第几个li,增加active类，同辈的li删除active类*/ ???????$points.eq($nowscreen).addClass(‘active‘).siblings().removeClass(‘active‘); ???????/*父级div样式top值，等于负的可视屏幕大小*刷新数*/ ???????$screen.animate({‘top‘:-$h*$nowscreen}); ???????//document.title=$nowscreen; ???????/*页面div的第几个，增加moving类，同辈的div删除moving类*/ ???????$pages.eq($nowscreen).addClass(‘moving‘).siblings().removeClass(‘moving‘); ???}) ???/*鼠标滚轮函数，事件变量event，滚轮次数dat*/ ???$(window).mousewheel(function(event,dat){ ???????/*没执行一次清空timer变量，重新计算*/ ???????clearTimeout(timer); ???????/*定时器函数*/ ???????timer = setTimeout(function(){ ???????????/*向下滚*/ ???????????if(dat==-1){ ???????????$nowscreen++; ???????} ???????/*向上滚*/ ???????else{ ???????????$nowscreen--; ???????} ???????/*最顶部限定0*/ ???????if($nowscreen<0){ ???????????$nowscreen=0; ???????} ???????/*最底部限定4，0-4*/ ???????if($nowscreen>$len-1){ ???????????$nowscreen = $len-1 ???????} ???????$screen.animate({‘top‘:-$h*$nowscreen}); ???????//document.title=$nowscreen; ???????$pages.eq($nowscreen).addClass(‘moving‘).siblings().removeClass(‘moving‘); ???????$points.eq($nowscreen).addClass(‘active‘).siblings().removeClass(‘active‘); ???????},200) ???})})</script></head>
<body>
<div class="pages_con"> ???<div class="pages"> ???????<div class="main_con"> ???????????<div class="left_img"> ???????????????<img src="../images/1.png" alt="boy&girl"> ???????????</div> ???????????<div class="right_info">日常里，与你相抱</div> ???????</div> ???</div> ???<div class="pages page2"> ???????<div class="main_con"> ???????????<div class="left_img"> ???????????????<img src="../images/2.png" alt="樱花美"> ???????????</div> ???????????<div class="right_info">樱花下，是你的小提琴</div> ???????</div> ???</div> ???<div class="pages page3"> ???????<div class="main_con"> ???????????<div class="left_img"> ???????????????<img src="../images/3.png" alt="星空"> ???????????</div> ???????????<div class="right_info">星空下，你我偶遇</div> ???????</div> ???</div> ???<div class="pages page4"> ???????<div class="main_con"> ???????????<div class="left_img"> ???????????????<img src="../images/4.png" alt="黄昏美"> ???????????</div> ???????????<div class="right_info">黄昏时，一人独奏</div> ???????</div> ???</div> ???<div class="pages page5"> ???????<div class="main_con"> ???????????<div class="left_img"> ???????????????<img src="../images/5.png" alt="樱花帅"> ???????????</div> ???????????<div class="right_info">琴声中，樱花飘扬</div> ???????</div> ???</div> ???<ul class="points"> ???????<li class="active"></li> ???????<li></li> ???????<li></li> ???????<li></li> ???????<li></li> ???</ul></div></body>
</html>
CSS文件：
/ CSS Document /
body,ul{
margin: 0; ?/取消列表和系统自带缩进/
padding: 0;
}
ul{
list-style: none;
}
/父级div/
.pages_con{
position: fixed;
left: 0;
top: 0;
width: 100%;
overflow: hidden;
}
/每一页面/
.pages{
height: 768px;
position: relative;
}
/小圆点ul/
.points{
width: 16px;
height: 176px;
position: fixed;
right: 20px;
top: 50%;
margin-top: -88px;
}
/每一个小圆点/
.points li{
width: 13px;height: 13px;border-radius: 50%;margin: 16px 0;border: 1px solid #666;cursor: pointer;}
/jQuery操作类/
.points .active{
background-color: #666666;
}
/页面大小/
.main_con{
width: 1366px;height: 768px;position: relative;}
/页面的图片/
.main_con .left_img{
position: relative;
left: -40px;
opacity: 0;
filter: alpha(opacity=0);
transition: all 1000ms ease 300ms;
}
/页面的文字/
.main_con .right_info{
width: 40px;
height: 300px;
position: absolute;
left: -50px;
top: 50%;
margin-top: -150px;
font-size: 30px;
color: #666666;
text-align: justify;
opacity: 0;
filter: alpha(opacity=0);
transition: all 1000ms ease 300ms;
}
/jQuery操作动画/
.moving .main_con .left_img{
left: 0;
opacity: 1;
filter: alpha(opacity=100);}
.moving .main_con .right_info{
left: 30px;
opacity: 1;
filter: alpha(opacity=100);}
jQuery整屏滚动
原文地址：http://blog.51cto.com/13742773/2342007