浏览器对body节点scrollTop解析的差异
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> .box{border:1px solid pink; background:#eee; height:200px;} .box:hover{background:cyan;} .bg-pink{background:pink;} .h800{height:800px;} .brd2g{border:2px solid green;} .over-a{overflow:auto;} body{ behavior:url(csshover.htc);} </style> <script type="text/javascript" src="jquery1.10min.js"></script> </head> <body> <div class="box"></div> <hr /> <div class="box over-a" id="wrap"> <div class="brd2g h800 bg-pink" id="con">水电费电费都水电费电费</div> </div> <div class="h800 brd2g">very high</div> <script> var body = document.body; var html = document.documentElement; window.scrollTo(0, 400); console.log('html.scrollHeight = ' + html.scrollHeight ); console.log('html.clientHeight = ' + html.clientHeight ); console.log('html.scrollTop = ' + html.scrollTop ); console.log('body.scrollHeight = ' + body.scrollHeight ); console.log('body.clientHeight = ' + body.clientHeight ); console.log('body.scrollTop = ' + body.scrollTop ); </script> </body> </html>
chrome:
html.scrollHeight = 1242
html.clientHeight = 278
html.scrollTop = 0
body.scrollHeight = 1242
body.clientHeight = 1226
body.scrollTop = 400
~~~scrollHeight>clientHeight 滚动条属于html元素的，但是html.scrollTop却为0，scrollTop被认为是body元素的，这里有点不合理，scrollTop一般都是带滚动条元素才有的
ie8:
html.scrollHeight = 1242
html.clientHeight = 254
html.scrollTop = 400
body.scrollHeight = 1226
body.clientHeight = 1226
body.scrollTop = 0
~~~scrollHeight>clientHeight 滚动条属于html元素的，html.scrollTop正常
firefox:
html.scrollHeight = 1242
html.clientHeight = 294
html.scrollTop = 400
body.scrollHeight = 1226
body.clientHeight = 1226
body.scrollTop = 0
~~~scrollHeight>clientHeight 滚动条属于html元素的，html.scrollTop正常
~~~注意 chrome下 html元素scrollTop始终为0, 页面的滚动高度从 body.scrolltop获得
