JavaScript DOM 經常使用尺寸

怪異和標準模式

瀏覽器在解析 CSS 時有怪異和標準兩種模式，目的是爲了向舊版本兼容
標準模式下瀏覽器會按 w3c 規範解析代碼
怪異模式下按瀏覽器自身規範解析代碼，通常會向後兼容 5 個版本
首句使用 <!DOCTYPE html>，則使用 HTML5 規範，即標準模式，不加這句則使用怪異模式
使用document.compatMode 返回 CSS1Compat 表示處於標準模式，返回 BackCompat 則爲怪異模式

滾動條滾動距離

常見寫法javascript

// 獲取滾動條和上側/左側的距離，即頁面滾動距離
window.pageYOffset/pageXOffset 
document.bady.scrollTop/scrollLeft
document.documentElement.scrollTop/scrollLeft
window.scrollY/scollX
複製代碼

兼容性表html

(b) 表明怪異模式，(s) 表明標準模式，C 表明 chrome，F 表明 firefox，O 表明 operajava

瀏覽器	IE6789(b)	IE678(s)	IE9(s)	C(bs)	O/F(b)	O/F(s)
documentElement	0	可用	可用	0	0	可用
body	可用	0	0	可用	可用	0
pageOffset	undefined	undefined	可用	可用	可用	可用
scroll	undefined	undefined	undefined	可用	可用	可用

兼容性寫法chrome

function getScrollOffset() {
    if (window.pageXOffset) {
        return {
            top: window.pageYOffset,
            left: window.pageXOffset
        }
    }
    else return {
        top:document.body.scrollTop || document.documentElement.scrollTop,
        left:document.body.scrollLeft || document.documentElement.scrollLeft
    }
}
複製代碼

窗口可視尺寸

常見寫法瀏覽器

// 獲取窗口可視區域寬高
window.innerWidth/innerHeight // 包括滾動條 兼容 IE9 及以上
// window.outerWidrh/outerHeight 包含工具欄和滾動條，即瀏覽器窗口大小
document.documentElement.clientWidth/clientHeight // 不包括滾動條 兼容標準模式
document.body.clientWidth/clientHeight // 包括滾動條 兼容怪異模式
複製代碼

兼容性寫法markdown

function getViewportSize() {
        if (window.innerWidth) {
            return {
                width: window.innerWidth,
                height: window.innerHeight
            }
        } else {
            if (document.compatMode === 'BackCompat') {
                return {
                    width: document.body.clientWidth,
                    height: document.body.clientHeight
                }
            } else {
                return {
                    width: document.documentElement.clientWidth,
                    height: document.documentElement.clientHeight
                }
            }
        }
    }
複製代碼

文檔滾動尺寸

常見寫法工具

// 獲取整個文檔的總尺寸
document.body.scrollHeight/scrollWidth
document.documentElement.scrollHeight/scrollWidth
// 優先使用 body.scrollHeight
// documentElement.scrollHeight 在低版本 IE 存在問題
複製代碼

兼容性寫法ui

function getScrollSize() {
    if (document.body.scrollHeight) {
        return {
            width: document.body.scrollWidth,
            height: document.body.scrollHeight
        }
    } else return {
        width: document.documentElement.scrollWidth,
        height: document.documentElement.scrollHeight
    }
}
複製代碼

元素文檔座標

offsetParentspa

元素無 fixed 定位時，offsetParent 爲最近的非默認定位的父級元素，沒有則返回 bodyfirefox

元素有 fixed 定位時，offsetParent 返回 null

body 的 offsetParent 爲 null

offsetTop/offsetLeft

var div = document.getElementById("box");
div.offsetTop/offsetLeft // 相對 offsetParent 元素的偏移
複製代碼

獲取元素在文檔中的座標

function getElemPositionInDoc(elem) {
    var parent = elem.offsetParent,
        top = elem.offsetTop,
        left = elem.offsetLeft;
    while (parent) {
        top += parent.offsetTop;
        left += parent.offsetLeft;
        parent = parent.offsetParent;
    }
    return {
        top: top,
        left: left
    }
}
複製代碼

窗口滾動

常見寫法

// 滾動到 (x, y) 座標
// window.scroll() 和 scrollTo() 功能相同
window.scrollTo(x, y);
window.scrollTo({
   top: 100,
   behavior: 'smooth' // 平滑滾動
});
複製代碼

滾動到低部判斷方法

window.innerHeight + window.pageYOffset >= document.body.scrollHeight
// 窗口可視高度 + 垂直滾動條滾動距離 >= 文檔滾動高度
// 注意寫兼容性
複製代碼