JavaScript DOM 常用尺寸

JavaScript 操作 DOM 时经常会用到一些尺寸，本文介绍怪异模式和标准模式下的滚动条距离、窗口尺寸、文档尺寸、元素文档坐标的兼容性写法以及窗口滚动到指定位置的方法

怪异和标准模式

浏览器在解析 CSS 时有怪异和标准两种模式，目的是为了向旧版本兼容
标准模式下浏览器会按 w3c 规范解析代码
怪异模式下按浏览器自身规范解析代码，一般会向后兼容 5 个版本
首句使用 <!DOCTYPE html>，则使用 HTML5 规范，即标准模式，不加这句则使用怪异模式
使用document.compatMode 返回 CSS1Compat 表示处于标准模式，返回 BackCompat 则为怪异模式

滚动条滚动距离

常见写法

// 获取滚动条和上侧/左侧的距离，即页面滚动距离
window.pageYOffset/pageXOffset 
document.bady.scrollTop/scrollLeft
document.documentElement.scrollTop/scrollLeft
window.scrollY/scollX

兼容性表

(b) 代表怪异模式，(s) 代表标准模式，C 代表 chrome，F 代表 firefox，O 代表 opera

浏览器	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	可用	可用	可用

兼容性写法

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 // 包括滚动条 兼容怪异模式

兼容性写法

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

文档滚动尺寸

常见写法

// 获取文档可滚动的总尺寸
document.body.scrollHeight/scrollWidth
document.documentElement.scrollHeight/scrollWidth
// 优先使用 body.scrollHeight
// documentElement.scrollHeight 在低版本 IE 存在问题

兼容性写法

function getScrollSize() {
    if (document.body.scrollHeight) {
        return {
             document.body.scrollWidth,
            height: document.body.scrollHeight
        }
    } else return {
         document.documentElement.scrollWidth,
        height: document.documentElement.scrollHeight
    }
}

元素文档坐标

offsetParent

元素无 fixed 定位时，offsetParent 为最近的非默认定位的父级元素，没有则返回 body

元素有 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
// 窗口可视高度 + 垂直滚动条滚动距离 >= 文档滚动高度
// 注意写兼容性