scrollTop : 滾動條滾動距離 說明：chrome下他會以為滾動條是文檔元素的，所以需要做兼容
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
我們來驗證下chrome是否存在兼容的問題：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{height:2000px;} </style> </head> <body> <script> document.onclick = function(){ console.log(document.documentElement.scrollTop); } </script> </body> </html>
ie7/ie9: 分別做了3次點擊
chrome下： 三次點擊都是0
scrollHeight 返回整個元素的高度+padding（包括子元素把父元素撐開隱蔽的地方）
說明:scrollHeight問題比較大
1、當子元素的高度大於父元素高度：標准瀏覽器下包含子元素樣式高+padding+margin+border+父元素padding-top的值，ie7以下包含子元素樣式高+padding+margin+border+父元素padding-top和padding-bottom
2、當子元素的高度小於父元素高度：標准瀏覽器下包含父元素樣式高+padding，ie7以下只計算子元素的高度+父元素的padding
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{height:2000px;} #d1{width:100px;height:100px;background:red;padding:10px;margin:10px;border:5px solid black;} #d1_1{width:100px;height:250px;background:blue;} </style> </head> <body> <div id="d1"> <div id="d1_1"></div> </div> <script> document.onclick = function(){ console.log(document.getElementById('d1').scrollHeight); } </script> </body> </html>
第一種情況下的ie9:
第一種情況下的ie7:
改一下父元素的高度，看下第二種情況：
#d1{width:100px;height:500px;background:red;padding:10px;margin:10px;border:5px solid black;}
第二種情況下的ie9:
第二種情況下的ie7: