滚动条详解及制作(二)

查看视口的尺寸

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

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

第一套是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  阅读(253)  评论(0编辑  收藏  举报