scrollWidth/scrollHeight、scrollTop/scrollLeft[盒模型系列]

scrollWidth/scrollHeight

1. 在没有滚动条的时候，即没有内容溢出时：

scrollWidth/scrollHeight获取的结果和clientWidth/clientHeight是一样的，即：

scrollWidth === clientWidth;
scrollHeight === clientHeight;

1. 有滚动条的时候,即内容溢出时：

真实内容的宽度和高度（包含溢出的内容），在加上左边的padding 和上边的padding 值，即：

scrollWidth === clientWidth + paddingLeft(或者clientLeft);
scrollHeight === clientHeight + paddingTop(或者clientTop);

scrollTop/scrollLeft

scrollTop: 竖向滚动条卷去的高度。
scrollLeft：横向滚动条卷去的宽度。

//当前卷去的竖向高度的大小
document.documentElement.scrollTop||document.body.scrollTop
//当前卷去的横向宽度的大小
document.documentElement.scrollLeft||document.body.scrollLeft

注意：

1. scrollTop/scrollLeft存在最大值和最小值。

最小值mini === 0;
//真实的高度 - 一屏的高度
最大值max === scrollHeight - clientHeight;

1. ‘读写属性’

client系列的clientWidth/clientHeight、clientLeft/clientTop;
offset系列的offsetWidth/offsetHeight、offsetLeft/offsetTop;
scroll系列的scrollWidth/scrollHeight、scrollLeft/scrollTop;
上面的6对属性中除scrollLeft/scrollTop这对属性之外的其他属性都是只读属性（只能通过属性获取而不能修改属性的值）。
scrollLeft/scrollTop：是可读写属性，我们不仅仅可以获取它的值，还可以修改它的值。

//例如，让滚动条出现在最顶部，我们需要这样设置
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;

PS: 因为有最大和最小值，如果我们给他设置，该值比最大值大，则默认设置为最大值；如果该值比最小值小，则默认设置为最小值。

我们可以写一个方式把他们封装在一起。

var boxModal = function (attr, value) {
    //只有scrollTop/scrollLeft可以修改，其他既是修改了也不会生效，所以我们可以这么写
    if (typeof value !== 'undefined') {
        document.documentElement[attr] = value;
        document.body[attr] = value;
    }
    return document.documentElement[attr] || document.body[attr];
}

这么使用：

utils.boxModal('scrollTop', 0);
utils.boxModal('scrollTop');
utils.boxModal('clientHeight');