JavaScript 操作 DOM 時經常會用到一些尺寸，本文介紹怪異模式和標準模式下的滾動條距離、視窗尺寸、文檔尺寸、元素文檔坐標的相容性寫法以及視窗滾動到指定位置的方法 ...
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 { 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 存在問題 -
相容性寫法
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 } }
元素文檔坐標
-
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 // 視窗可視高度 + 垂直滾動條滾動距離 >= 文檔滾動高度 // 註意寫相容性
