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');