scrollWidth:内容超过了盒子,宽度为内容的宽度,不超出是盒子本身的width+padding
scrollHeight:内容超出了盒子,高度为内容的高。不超出是盒子本身height+padding
注意事项:IE67,scrollHeight即使不超出盒子,它的值也是内容的高度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 100px;height: 100px;border: 1px solid #000;"> <div style="width: 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监听,它们的使用有严重的兼容性问题,谷歌判断依据是以body为主,而ie判断依据是整个html
<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>
原文:http://www.cnblogs.com/wuqiuxue/p/7940519.html