滾動條詳解及製做（二）

時間 2019-12-09

標籤滾動條詳解製做简体版

原文原文鏈接

查看視口的尺寸

視口就是咱們的可視區，由於咱們改變瀏覽器的大小的時候會改變可視區的大小，那麼咱們如何來查看當前瀏覽器的可視區大小？html

這裏咱們依然有兩套方法：瀏覽器

第一套是window.innerHeight/window.innerWidth;函數

這個方法能夠直接獲取到當前可視區的寬高，可是依然很遺憾的是IE8以及如下的版本不兼容。spa

這個時候就須要第二套方法了：code

在標準模式下，doucment.documentElement.clientWidth/document.documentElement.clientHeighthtm

在任何瀏覽器都兼容。blog

在怪異模式（混雜模式）下，ip

document.body.clientWidth/document.body.clientHeight字符串

才能查看視口大小，而不能使用上面標準模式下的方法。get

• 什麼是怪異模式和標準模式呢？

瀏覽器的渲染模式有兩種：標準模式和怪異模式。咱們經常使用的是標準模式，怪異模式是防止瀏覽器升級版本太高對後面版本你的代碼不兼容，讓瀏覽器能夠向後兼容其餘低版本的代碼的法規則，好比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   }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。