偏移量

• 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;
}