scrollWidth：父div宽度小于子div宽度，父div scrollWidth宽度为子div的宽度，大于则为本身的宽度width+padding
scrollHeight：父div高度小于子div高度，父div scrollHeight高度为子div高度，大于则为本身的高度height+padding
注意事项：IE67，scrollHeight即使不超出盒子，它的值也是内容的高度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style=" 100px;height: 100px;border: 1px solid #000;"> <div style=" 120px;height: 400px;border: 1px solid #ccc;"></div> </div> <script> var divEle=document.getElementsByTagName("div")[0]; console.log(divEle.scrollWidth);//122 console.log(divEle.scrollHeight);//402 </script> </body> </html>
scrollLeft：被浏览器卷去的左边内容的长度
scrollTop：被浏览器卷曲的头部内容的长度
注意事项：一般通过window.onscroll监听，它们的使用有严重的兼容性问题：
1、未声明DTD（谷歌只认识这样的形式，IE9+也认识）：document.body.scrollTop
2、已经声明DTD（IE678只认识这样的形式，IE9+任何时候都认识）：document.documentElement.scrollLeft
3、不管是是否声明DTD（火狐谷歌IE9+认识）：window.pageYOffset
区别：谷歌判断依据是以body为主，而ie判断依据是整个html
判断是否声明：DTD：document.compatMode==="BackCompat" BackCompat：未声明 CSS1Compat：已声明
<script> window.onscroll=function () { var xLeft=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft; var yTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop; document.title=xLeft+" "+yTop; } </script>