offset、client、scroll的区别

offset、client、scroll的区别

offset

偏移量：offset dimension

1. offsetHeight: 元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。

2. offsetWidth: 元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。

3. offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。

4. offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离

offsetLeft与offsetTop指的是自己距离offsetParent的距离，默认情况下元素的offsetParent指的是body
如果是“子绝父相”的定位，则子级元素的offsetParent是父级元素的relative元素
固定定位的元素它的offsetParent 是null

client

客户区大小：client dimension

1. clientWidth：元素内容区宽度加上左右内边距宽度。

2. clientHeight：元素内容区高度加上上下内边距高度。

scroll

滚动大小:（scroll dimension），指的是包含滚动内容的元素的大小。

1. scrollHeight：在没有滚动条的情况下，元素内容的总高度。
2. scrollWidth：在没有滚动条的情况下，元素内容的总宽度。
3. scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
4. scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。

总结

在确定文档的总高度时（包括基于视口的最小高度时），必须取得scrollWidth/clientWidth 和scrollHeight/clientHeight 中的最大值，才能保证在跨浏览器的环境下得到精确的结果。下面就是这样一个例子。

var docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
var docWidth = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);

注意，对于运行在混杂模式下的IE，则需要用document.body 代替document.documentElement。

最后一点

我们可以通过这个点完成网页当中的回到顶部的功能

通过scrollLeft 和scrollTop 属性既可以确定元素当前滚动的状态，也可以设置元素的滚动位置。在元素尚未被滚动时，这两个属性的值都等于0。如果元素被垂直滚动了，那么scrollTop 的值会大于0，且表示元素上方不可见内容的像素高度。如果元素被水平滚动了，那么scrollLeft 的值会大于0，且表示元素左侧不可见内容的像素宽度。这两个属性都是可以设置的，因此将元素的scrollLeft 和scrollTop 设置为0，就可以重置元素的滚动位置。下面这个函数会检测元素是否位于顶部，如果不是就将其回滚到顶部。

function scrollToTop(element){
    if (element.scrollTop != 0){
        element.scrollTop = 0;
    }
}