一、scrollWidth与scrollHeight
当标签内容大于标签高宽时：内容实际的高宽（不包括边框）
如果标签中内容为空或者内容高宽小于标签高宽: srcollWidth = offsetWidth - border;
二、scrollTop与scrollLeft
scrollTop：对象向上卷曲出去的距离
scrollLeft：对象向左卷曲出去的距离
使用一个小案例来说明scrollTop的作用，代码如下。当滑动#dv对象时，浏览器就可以利用scrollTop属性显示#dv对象滑动距离：
<!DOCTYPE html>
<html>
<head>
<title>实时获取scroll值</title>
<style>
* {
margin: 0;
padding: 0;
}
#dv {
width: 200px;
height: 200px;
border: 1px solid red;
overflow: auto;
}
</style>
</head>
<body>
<button id="btn">scroll</button>
<div id="dv">1111111111
111111111111
111111111111111
1111111111111
1111111111111
11111111111111
11111111111
111111111111
1111111111111
111111111111
1111111111111
</div>
</body>
<script>
function my$(id){
return document.getElementById(id);
}
my$('dv').onscroll = function(){
console.log(this.scrollTop);
}
</script>
</html>
srcoll案例
在计算整个页面的滑动距离时scrollTop与scrollLeft的兼容问题：
IE：
对于没有doctype声明的页面，使用 document.body.scrollTop 或 document.documentElement.scrollTop；
对于有doctype声明的页面，则使用 document.documentElement.scrollTop；
Chrome、Firefox：
对于没有doctype声明的页面，使用 document.body.scrollTop 来获取 scrollTop高度 ；
对于有doctype声明的页面，则使用 document.documentElement.scrollTop；
Safari:
safari 比较特别，有自己获取scrollTop的函数 ： window.pageYOffset ；
因此，为了兼容所有浏览器，封装一个函数，去获取页面向上卷曲出去的距离和向左卷曲出去的距离
function getScroll(){
return {
left:window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0,
top:window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0
}
}
网友评论