<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css">
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
.page{
height: 100%;
width: 100%;
font-size: 126px;
display: -webkit-box; /*Safari*/
display: -moz-box; /*Firefox*/
display: -ms-flexbox; /*IE*/
display: -webkit-flex; /*Chrome*/
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
#mao{
position: fixed;
right: 0;
bottom: 0;
}
</style>
<body>
<div class="page" id="item-1">Prat 1</div>
<div class="page" id="item-2">Prat 2</div>
<div class="page" id="item-3">Prat 3</div>
<div class="page" id="item-4">Prat 4</div>
<div class="page" id="item-5">Prat 5</div>
<div class="page" id="item-6">Prat 6</div>
<div class="page" id="item-7">Prat 7</div>
<script type="text/javascript">
// var oldy = 0,tem = 0,fullheight = document.body.clientHeight;
// window.onscroll = function() {
// var y = document.documentElement.scrollTop || document.body.scrollTop;
// console.log('this is y' + y);
// if (y > oldy) {
// location.href = '#item-4';
// console.log('向下翻');
// oldy = y;
// } else if (y < oldy) {
// // document.body.scrollTop-=fullheight;console.log('向上翻');oldy=y;
// } else {
// console.log('翻你妹啊');
// console.log('xiangdeng');
// }
//
// console.log('this is oldy' + oldy);
// }
var scrollFunc = function(e) {
ee = e || window.event;
var t1 = document.getElementById("wheelDelta");
var t2 = document.getElementById("detail");
var y = document.documentElement.scrollTop || document.body.scrollTop;
var fullheight = document.body.offsetHeight;
if (e.wheelDelta) { //IE/Opera/Chrome
var a = e.wheelDelta;//向上为120，向下为-120
if(a>0){//向上
document.body.scrollTop -= fullheight/2;
}
if(a<0){//向下
document.body.scrollTop += fullheight/2;
}
} else if (e.detail) { //Firefox
var a = e.detail;//向上为-3，向下为3
if(a<0){//向上
document.documentElement.scrollTop -= fullheight/2;
}
if(a>0){//向下
document.documentElement.scrollTop += fullheight/2;
}
}
}
/*注册事件*/
if (document.addEventListener) {
document.addEventListener('DOMMouseScroll', scrollFunc, false);
} //W3C
window.onmousewheel = document.onmousewheel = scrollFunc; //IE/Opera/Chrome
</script>
</body>
</html>
源码如上。
一开始希望window.onscroll = function() {}的方法来实时检测滚动栏是否有变化。也实现了翻页的功能，但是直接就是一翻到底。。。也就是因为在实现翻页的时候由于document.body.scrollTop的变化，会自动触发新的window.onscroll函数。所以无奈只能求助百度，最后居然让我发现一个绝妙的方法和博客。不过没有做过向下的兼容性测试，最新版chrome和firefox是支持的。
希望自己可以慢慢学习，每天练习。
if (document.addEventListener) {
document.addEventListener('DOMMouseScroll', scrollFunc, false);
} //W3C
window.onmousewheel = document.onmousewheel = scrollFunc; //IE/Opera/Chrome
事件监听的兼容写法
最后一个需要注意的地方是获取当前页面顶端到body顶端的距离（比如你在第三页距离文档头部的距离为两个屏幕的高度），要这样写
var y=document.documentElement.scrollTop || document.body.scrollTop;谷歌中
document.documentElement.scrollTop怎么搞都是0，需要用bodywindow.event.wheelDelta非firefox浏览器获取到滚动条变化的情况，以谷歌为例。
而且上述代码的关键在于其中firex和其他浏览器的效果不同
document.body.scrollTop的变化，会自动触发新的window.onscroll函数。所以无奈只能求助百度，最后居然让我发现一个绝妙的方法和博客。不过没有做过向下的兼容性测试，最新版chrome和firefox是支持的。
如果向上滚动鼠标滚轮，则window.event.wheelDelta为120，向下则为-120.
火狐则是window.event.detail代表鼠标滚轮运动情况，且向上滚动window.event.detail的值为-3，向下为3.这是区别的地方
文档也是乱乱的，最终效果也有点不理想。滚动起来不平滑，但是不用jquery的情况下写动画还是不会写。留待以后回过头复习的时候完善。
演示地址
https://github.com/Fucntion/jseveryday/blob/master/207/207.html
放一个自己最近做的小东西 米单词，公益背单词