你真的懂js獲取可視區寬高嗎

可能你會以爲獲取可視區寬高不是很簡單嗎

原生js獲取高度不就是就window.innerHeight一句話的事，但是真的這麼簡單嗎

來看個測試頁面,若是頁面帶有橫向縱向的滾動條，咱們打印出各個高度進行查看對比

順便你也能夠看看document.body和document.documentElement在各個瀏覽器的差別;document.documentElement返回的是整個文檔的根節點即 html標籤；document.body 返回的是DOM對象裏的body子節點，即 body 標籤

console.log('document.documentElement.clientHeight-' + document.documentElement.clientHeight);
console.log('document.documentElement.scrollHeight-' + document.documentElement.scrollHeight);
console.log('document.documentElement.offsetHeight-' + document.documentElement.offsetHeight);
console.log('document.body.clientHeight-' + document.body.clientHeight);
console.log('document.body.scrollHeight-' + document.body.scrollHeight);
console.log('document.body.offsetHeight-' + document.body.offsetHeight);
console.log('window.innerHeight-' + window.innerHeight);
複製代碼

1. ie8下各個值

2. ie9下各個值

3. ie10跟ie9同樣不列圖了
4. ie11下各個值

6. 火狐瀏覽器下各個值

7. chorme瀏覽器下各個值

經過以上各圖對比不難看出（先排除ie8）

window.innerHeight = document.documentElement.clientHeight + 滾動條高度；

若是沒有滾動條則window.innerHeight = document.documentElement.clientHeight

在來講說ie8

ie8比較特殊不支持window.innerHeight而且html還自帶有2像素的邊框; 能夠經過document.documentElement.offsetHeight - 2 * 2獲得window.innerHeight的值

因此ie8的window.innerHeight = document.documentElement.offsetHeight - 2 * 2 = document.documentElement.clientHeight + 滾動條高度。

若是沒有滾動條window.innerHeight = document.documentElement.offsetHeight - 2 * 2 = document.documentElement.clientHeight

因此獲取可視區的高度不是簡單的window.innerHeight，真正的可視區高度不該該包括滾動條

/** * 獲取視口寬高 兼容兼容到ie8 * @param {boolean} flag 標識返回的寬高是否包含滾動條 * @return {object} {widht: xxx, height: xxx} 視口寬高 / function getViewPort (flag) { if (typeof flag === 'undefined') { return { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }; } if (flag === true) { // ie8 html 有2像素邊框 上下, 左右 4像素 return { width: window.innerWidth || document.documentElement.offsetWidth - 2 * 2, height: window.innerHeight || document.documentElement.offsetHeight - 2 * 2 }; } } 複製代碼

獲取文檔的寬高呢

經過以上各圖的對比，整個文檔的高度，能夠經過document.documentElement.scrollHeight來獲取各個瀏覽器都比較一致，你也沒必要糾結究竟是用document.body 仍是用document.documentElement; 用clientHeight仍是offsetHeight

/** * 獲取文檔寬高 兼容兼容到ie8 * * @return {object} {widht: xxx, height: xxx} 視口寬高 / function getDocumentPort (flag) { return { width: document.documentElement.scrollWidth, height: document.documentElement.scrollHeight }; } 複製代碼