杂记（隐藏滚动条及鼠标滚轮事件）
本次目的：要实现一个全屏网页，隐藏滚动条，当滚动 鼠标滚轮 时，屏幕像按帧数一样切屏而不是默认的滚动
1 隐藏滚动条
想要全屏演示隐藏滚动条，这里想到的方法是把 <body> 元素设置 overflow:hidden，然后再设置包裹元素定义 width:102%;，overflow-y:hidden; 以及 overflow-x:auto;，并且使用 js 计算浏览器的高度再定义该包裹元素的高度与之相等，这些的目的是：想要在内实现一个内容可自行滚动的元素，然后将其的滚动条溢出 <body> 元素，而由于 <body> 元素定义了overflow:hidden;，所以就可以把滚动条隐藏掉，而由于设置包裹元素的高度等同于浏览器，因此 <body> 元素也可以无需生成滚动条。具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.container{
width: 102%;
overflow:hidden;
overflow-y: auto;
padding-right: 2%;
height: 500px;
}
</style>
<script type="text/javascript" src="jquery1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$('.container').css('height',$(window).height())
})
</script>
</head>
<body style="overflow: hidden;">
<div class="container">
<div class="box1">
<p>1</p>
</div>
<div class="box2">
<p>2</p>
</div>
<div class="box3">
<p>3</p>
</div>
<div class="box1">
<p>1</p>
</div>
<!-- .... -->
</div>
</body>
</html>
2 鼠标滚轮事件（mousewheel以及DOMMouseScroll）
鼠标滚轮事件主要分为 FireFox派 和 其他派
2.1 mousewheel（IE6）
IE，Opera、Chrome和Safari都实现了这个事件。当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时（无论向上还是向下），就会触发mousewheel事件。这个事件可以在任何元素上面触发，最终会冒泡到document（IE8）或window（IE9、Opera、Chrome及Safari）对象。
与mousewheel事件对应的event对象包含鼠标事件的所有标准信息外，还包含一个特殊的 wheelDelta 属性。
- 当用户向上滚动鼠标滚轮时，
wheelDelta是 120 的倍数； - 当用户向下滚动鼠标滚轮时，
wheelDelta是 -120 的倍数。
2.2 DOMMouseScroll
而Firefox则支持一个名为 DOMMouseScroll 的类似事件。
而有关鼠标滚轮的信息则保存在 detail 属性中：
- 当向上滚动鼠标滚轮时，这个属性的值是 -3 的倍数；
- 当向下滚动鼠标滚轮时，这个属性的值是 3 的倍数。
jquery实现代码：
<script src="//static.ydcss.com/libs/jquery/1.11.2/jquery.js"></script>
<script>
!function ($) {
$(document).on('mousewheel DOMMouseScroll', function (e) {
//WebKit内核，Trident内核 => mousewheel
//Gecko内核 => DOMMouseScroll
e.preventDefault();
var value = e.originalEvent.wheelDelta || -e.originalEvent.detail;
//e.originalEvent.wheelDelta => 120(up) or -120(down) 谷歌IE内核
//e.originalEvent.detail => -3(up) or 3(down) 火狐内核
var delta = Math.max(-1, Math.min(1, value));
console.log(delta < 0 ? 'down' : 'up');
});
}(jQuery);
</script>
