document.body 與 document.documentElement區別介紹
阿新 • • 發佈:2017-11-21
logs 存在 滾動條 jsb doctype 2.0 ima root scroll
什麽是document.body?
返回html dom中的body節點 即<body>
什麽是 document.documentElement?
返回html dom中的root 節點 即<html>
document.documentElement 與 document.body的應用場景
獲取 scrollTop 方面的差異
在chrome(版本 52.0.2743.116 m)下獲取scrollTop只能通過document.body.scrollTop,而且DTD是否存在,不會影響 document.body.scrollTop的獲取。 通過console查看結果: demo 1 with doctype : http://jsbin.com/cisacam demo 2 without doctype: http://jsbin.com/kamexad/16
在firefox(47.0)及 IE(11.3)下獲取scrollTop,DTD是否存,會影響document.body.scrollTop 與 document.documentElement.scrollTop的取值
在firefox(47.0) 頁面存在DTD,使用document.documentElement.scrollTop獲取滾動條距離;
頁面不存在,使用document.body.scrollTop 獲取滾動條距離 demo 1 with doctype : http://jsbin.com/cisacam demo 2 without doctype: http://jsbin.com/kamexad/16
IE(11.3)
頁面存在DTD,使用document.documentEelement.scrollTop獲取滾動條距離 頁面不存在DTD,使用document.documentElement.scrollTop 或 document.body.scrollTop都可以獲取到滾動條距離 demo 1 with doctype : http://jsbin.com/cisacam demo 2 without doctype: http://jsbin.com/kamexad/16
兼容解決方案:
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
document.body 與 document.documentElement區別介紹