乐趣区

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

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

退出移动版