共计 1412 个字符，预计需要花费 4 分钟才能阅读完成。
scrollWidth/scrollHeight
在没有滚动条的时候，即没有内容溢出时：
scrollWidth/scrollHeight 获取的结果和 clientWidth/clientHeight 是一样的，即：
scrollWidth === clientWidth;
scrollHeight === clientHeight;
有滚动条的时候, 即内容溢出时：
真实内容的宽度和高度（包含溢出的内容），在加上左边的 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
注意：
scrollTop/scrollLeft 存在最大值和最小值。
最小值 mini === 0;
// 真实的高度 – 一屏的高度
最大值 max === scrollHeight – clientHeight;
‘读写属性’
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’);