纵向自动填充及监听滚轮事件的兼容性问题

发表于

初始化文件reset.css

在开始进入正题之前先分享一段代码，对于新手的同学可以参考下！

写过几个页面的同学都知道，标签元素如body，p等等浏览器默认都会赋予一些样式，而如a，buttom默认移动鼠标都不会出现小手的标记，在需要的时候一遍遍地添加显然是不合理的，也增加了冗余代码，我们可以在写其他css代码之前先引入下面的代码文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*初始化  reset*/  
body,button,dd,dl,dt,h1,h2,h3,h4,h5,h6,input,li,ol,p,td,ul{margin:0;padding:0}  
body,button,input{font:12px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif}  
h1,h2,h3,h4,h5,h6,button,input{font-size:100%}  
ol,ul{list-style:none}  
a{text-decoration:none}  
a:hover{text-decoration:underline}  
fieldset,img{border:0;vertical-align:top;}  
a,button{cursor:pointer;}  
/*清除浮动*/  
.clearfix:before,.clearfix:after {  
    content:"";  
    display:table;  
}  
.clearfix:after{clear:both;}  
.clearfix{  
    *zoom:1;/*IE/7/6*/  
}

引入上面代码之后，我们就可以开始愉快地书写我们的代码了！

纵向内容自动填充

之前有一篇博文讲的是三栏布局中间自适应的问题，现在讲纵向两栏内容自动填充的问题！

2-1.png

纵向的自适应跟水平的略有不同，因为我们不能利用div标签的block特性（占据一行）了，而是利用头部元素绝对定位和内容元素的height：100%来实现，而且还需要借助js(窗口大小变化需要重新计算高度)。

实际场景：这是我最近做一个小项目中的一个场景，头部固定高度，下面部分N屏，随滑轮滚动而切换，头部不变，不显示侧边栏。

2-2.png

页面框架如下：

1
2
3
4
5
6
7
8
9
10
<style>
    #header{height:130px;position:absolute;z-index:100;}
    #content{height:100%;padding-top:130px;overflow:hidden;}
</style>
<div id="header"></div>
<div id="content">
    <div id="wrapper">
        这里是需要滚动的内容......
    </div>
</div>

id为content的元素用了padding-top：130px，跟之前博文中的两栏布局类似，再用height：100%；达到视觉上的上下两栏，其实头部是覆盖在content之上的。

但是，这样会造成一个问题，就是height+padding-top其实已经超出了窗口的大小，这时会出现滚动栏，那么如何让滚动栏消失呢？

这里需要用到js（jq）：

1
$('#content').css({"height":(parseInt(document.body.clientHeight)-130)+"px"});

这样我们就能让侧边栏消失了，考虑到用户有时会缩放页面，所以最好把这句代码放到函数里面，并绑定到resize事件，

1
2
3
4
5
6
var resizes = function(){
    $('#content').css({"height":(parseInt(document.body.clientHeight)-130)+"px"});
};
//窗口变化时调用
$(window).resize = resizes;

鼠标滚动的兼容性问题

解决完布局的问题，接下来就是考虑如何解决鼠标滚动事件的兼容性问题了。
首先，不同的浏览器有不同的滚轮事件。主要是有两种，onmousewheel（firefox不支持）和DOMMouseScroll（只有firefox支持）。那么如何写一个可以兼容所有浏览器的监听函数呢？看下面代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
   //判断浏览器类型
   var agent = navigator.userAgent;
   //firefox滚动函数
var DomScroll = function(e){
				
	//event对象兼容获取
	e = e || window.event;
	indexY = e.clientY;
	wrapHeight = parseInt(wrapper[0].offsetHeight);
       //判断鼠标是否位于第二栏内
	if (indexY>=wrapY)
       {	
		//获取滑动的方向
		var orient = e.detail
					
		if (orient>0)
		{	
			//下滚
			initial++;
			if(initial>6){
				initial = 6;
			}
		}else{
			//上滚
			initial--;
			if(initial<0){
				initial = 0;
			}
		}
		animation(initial);
		
		//滚动一次后2s内不能再滚动
		
		document.removeEventListener("DOMMouseScroll",DomScroll);
		setTimeout(function(){document.addEventListener("DOMMouseScroll",DomScroll)},2000);
					
	}
};
	
//其他浏览器滚动函数
var wheelScroll = function(e){
	e = e || window.event;
	indexY = e.clientY;
	wrapHeight = parseInt(wrapper[0].offsetHeight);
	if (indexY>=wrapY)
	{	
					
		//获取滑动滚动的方向，并且兼容浏览器
		var orient = e.wheelDelta;
		if (orient<0)
		{
			//下滚
			initial++;
			if(initial>6){
				initial = 6;
			}
						
		}else{
			//上滚
			initial--;
			if(initial<0){
				initial = 0;
			}
						
		}
		animation(initial);
		document.onmousewheel = null;
		setTimeout(function(){document.onmousewheel=wheelScroll},2000)
						
	}
}
		
//判断并滚动
if(/.*Firefox.*/.test(agent)){
			
	document.addEventListener("DOMMouseScroll",DomScroll);
			
}else{
	document.onmousewheel = wheelScroll;
}

  • 我们首先要通过navigator.UserAgent获取agent对象，利用正则我们可以判断当前浏览器的类别，如果是firefox浏览器，则需要通过document.addEventListener(“DOMMouseScroll”,DomScroll);来监听事件，否则用document.onmousewheel = wheelScroll即可;

  • 通常我们都需要知道鼠标滑轮是上滚还是下滚，从而作出更多的操作。

    这里需要注意，现在五大浏览器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四类使用wheelDelta；两者只在取值上不一致，代表含义也不一致，detail与wheelDelta只各取两个值，detail只取±3，wheelDelta只取±120，其中detail正数表示为向下，负数表示向上，而wheelDelta正数表示为向上，负数表示向下，网上的文章有出入（说含义一样实际不是），请以实践为主！

到这里内容就结束了，如想了解更多自适应和兼容性的问题，请看高级程序设计这本书或者google寻找资料！