一、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
  }
}