做页面滚屏时遇到的一些问题

　　最近在做一个页面，是需要单屏内容滚动效果。要求是每次向下滚动滚轮都页面向上滚动一屏，而向上相反，但是头部和尾部站的内容又不是正好一屏。

当时页面结构是：

 

　　　　　　　　<div class="header"></div>

　　　　　　　　<!--中间内容-->

　　　　　　　　<div class="page-content">

　　　　　　　　　　<div class="no1"></div> 

　　　　　　　　　　<div class="no2"></div> 

　　　　　　　　　　<div class="no3"></div> 

　　　　　　　　　　<div class="no4"></div> 

　　　　　　　　</div>

 

 

中间块每个都和屏幕一样高，头尾是多少就多少，不根据屏幕改变。那么问题就是头尾滚屏时将如何滚动？当时我的想法是，头部和尾部滚屏时，能正好滚到相邻的那

一屏就ok了。哪么就要单独计算下，首屏和尾屏滚动的高度就行。实现的思路是把body设置成一个屏幕的高度。那样我在使body的样式属性margin－top来控制整体内容上下滚动。

　　在这里又两个问题:

1 、 IE7 中body{overflow-x:hidden;}无效；去百度了下发现是应为ie7和IE6中html初始值不同

　　chrome、firefox会初始付值给html{overflow:visible;}

　　IE6 初始付值html{overflow-x:auto;overflow-y:scroll;}

　　IE7 初始付值html{overflow-x:visible;overflow-y:scroll;}

　　知道原因之后就好办了，只要给html{overflow:visible;}. 

2、就是滚轮事件的获取了。下面是摘抄的一段代码（详细解释请移步http://www.zhangxinxu.com/wordpress/2013/04/js-mousewheel-dommousescroll-event/）

　　

/***********************
* 函数：判断滚轮滚动方向
* 作者：walkingp
* 参数：event
* 返回：滚轮方向 1：向上 -1：向下
*************************/
var scrollFunc=function(e){
　　var direct=0;
　　removeMouseWheel(scrollFunc);
　　e=e || window.event;
　　if(e.wheelDelta){//IE/Opera/Chrome
　　　　direct=e.wheelDelta;
　　}else if(e.detail){//Firefox 
　　　　direct=-e.detail;

　　if(detail<0){//向下

　　　　//动画逻辑

　　}else if(detail>0){//向上

　　　　//动画逻辑

　　}
}
/*注册事件*/
function addMouseWheel(fn){
　　if(document.addEventListener){
　　　　document.addEventListener('DOMMouseScroll',fn,false);
　　}//W3C
　　window.onmousewheel=document.onmousewheel=fn;//IE/Opera/Chrome/Safari
}

/*解绑事件*/
function removeMouseWheel(fn){
　　if(document.addEventListener){
　　　　document.removeEventListener('DOMMouseScroll', fn,false);
　　}//W3C
　　window.onmousewheel=document.onmousewheel = null;
}
addMouseWheel(scrollFunc);