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