常用元素位置与大小总结

偏移量

• offsetHeight: 元素在垂直方向占据的空间大小 => 内容高度 + 上下padding + 上下boder

• offsetWidth: 元素在水平方向占据的空间大小 => 内容宽度 + 左右padding + 左右boder

• offsetTop: 元素外边框距离offsetParent的上内边框的距离

• offsetLeft: 元素外边框距离offsetParent的左内边框的距离

offsetParent 是一个只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table 元素对象或根元素（标准模式下为 html；怪异模式下为 body）。当元素的 style.display 设置为 none 或定位为fixed时，offsetParent 返回 null

元素大小

• clientWidth: 元素内容及内边距所占空间宽度, 不包含滚动部分

• clientHeight: 元素内容及内边距所占空间高度, 不包含滚动部分

滚动大小

• scrollLeft: 被隐藏在内容区域左侧的宽度(有横向滚动条时)

• scrollTop: 被隐藏在内容上边区域的高度(有竖向滚动条时)

• scrollHeight: 在没有滚动条时，元素内容的高度

• scrollWidth: 在没有滚动条时，元素内容的宽度

常用位置和大小计算（标准模式）

• 浏览器可视区宽高

// 不包含滚动条
// width
document.documentElement.clientWidth
// height
document.documentElement.clientHeight

// 包含滚动条(ie9+, 不是css规范)
// width
window.innerWidth
// height
window.innerHeight

• 文档正文总宽高

// width
 Math.max(document.documentElement.scrollWidth, 
    document.documentElement.clientWidth);
// height 
Math.max(document.documentElement.scrollHeight, 
    document.documentElement.clientHeight);

// 注：由于各浏览器在scrollWidth和clientWidth表现不一致，  
// 所以需要取得最大值来获得准确的值；

// all
function getPageWH(){
    var d = document.documentElement;
    var sw = d.scrollWidth,
        sh = d.scrollHeight,
        cw = d.clientWidth,
        ch = d.clientHeight;
    return {
        width: Math.max(sw, cw),
        height: Math.max(sh, ch)
    };
}

• 元素滚动隐藏区域宽高

// top
el.scrollTop;
// left
el.scrollLeft;

//文档滚动大小
// top
document.body.scrollTop
// left
document.body.scrollLeft

• 元素距离文档顶部大小

// 当offsetParent为body时
// top
el.offsetHeight;

// 当offsetParent不为body时，需要一层层循环至offsetParent为null(通用方法)

// top
function getTop(el){
    var top = el.offsetTop,
        currentParent = el.offsetParent;
    while(currentParent != null){
        top += currentParent.offsetTop;
        currentParent = currentParent.offsetParent;
    }
    return top;
}

• 元素距离文档左侧大小(与上面类似)

// left
el.offsetLeft;

// left 
function getLeft(el){
    var top = el.offsetLeft,
        currentParent = el.offsetParent;
    while(currentParent != null){
        top += currentParent.offsetLeft;
        currentParent = currentParent.offsetParent;
    }
    return top;
}

• 元素距离视口顶部大小

// 元素距离视口顶部大小 = 元素距离文档顶部大小 - 文档正文垂直滚动高度；
function topToViewport(el){
    return getTop(el) - document.body.scrollTop;
}

• 元素距离视口左侧大小

// 元素距离视口顶部大小 = 元素距离文档左侧大小 - 文档正文水平滚动高度；
function leftToViewport(el){
    return getLeft(el) - document.body.scrollLeft;
}

• 判断元素是否在可视区

// 文档正文垂直滚动高度 < 可视区域范围 < (浏览器可视区高度+文档正文垂直滚动高度)
function isOnViewport(el){
    var offsetTop = getTop(el), // 元素距离顶部高度
        st = document.body.scrollTop, // 文档正文垂直滚动高度
        vh = document.documentElement.clientHeight;  // 视口高度

    return (offsetTop > st) && (offsetTop < st + vh);
}

• 判断是否滚动到底部

function isBottom(){
    var currentTop = document.body.scrollTop + document.documentElement.clientHeight;
    var totalTop = document.documentElement.offsetHeight;

    return currentTop == totalTop;
}