滚动条详解及制作(二)
查看视口的尺寸
视口就是我们的可视区,因为我们改变浏览器的大小的时候会改变可视区的大小,那么我们如何来查看当前浏览器的可视区大小?
这里我们依然有两套方法:
第一套是window.innerHeight/window.innerWidth;
这个方法可以直接获取到当前可视区的宽高,但是依然很遗憾的是IE8以及以下的版本不兼容。
这个时候就需要第二套方法了:
在标准模式下,doucment.documentElement.clientWidth/document.documentElement.clientHeight
在任何浏览器都兼容。
在怪异模式(混杂模式)下,
document.body.clientWidth/document.body.clientHeight
才能查看视口大小,而不能使用上面标准模式下的方法。
• 什么是怪异模式和标准模式呢?
浏览器的渲染模式有两种:标准模式和怪异模式。我们常用的是标准模式,怪异模式是防止浏览器升级版本过高对后面版本你的代码不兼容,让浏览器可以向后兼容其他低版本的代码的法规则,比如IE6的怪异模式下可以兼容IE5个IE4的语法。
• 我们如何变成怪异模式呢?
其实很简单,只需要把我们html代码的第一行的<!DOCTYPE HTML>去掉就可以变成怪异模式了,而加上这一行代码就可以变成标准模式。
• 如何判断怪异模式还是标准模式?
document上中有一个方法叫做compatMode,当浏览器处于怪异模式的时候会返回字符串“BackCompat”,在标准模式下可以返回“CSS1Compat”,通过这个方法我们就可以判断了。
知道了什么是标准模式和怪异模式以及如何判断的情况下,我们就可以封装一个兼容性的函数,返回浏览器的视口大小
1 function getViewportOffset () { 2 if(window.innerWidth) { 3 return { 4 w: window.innerWidth, 5 h: window.innerHeight 6 } 7 } 8 if(document.compatMode == ‘CSS1Compat’) { 9 return { 10 w: document.documentElement.clientWidth, 11 h: document.documentElement.clientHeight 12 }else { 13 return { 14 w: document.body.clientWidth, 15 h: document.body.clientHeight 16 } 17 } 18 }