滚动条详解及制作（二）

查看视口的尺寸

视口就是我们的可视区，因为我们改变浏览器的大小的时候会改变可视区的大小，那么我们如何来查看当前浏览器的可视区大小？

这里我们依然有两套方法：

第一套是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   }

 

JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)
posted @ 2018-11-28 18:22  Panda-Q  阅读(248)  评论(0)  编辑  收藏  举报