1、scrollLeft/scrollTop——页面顶部到可视区顶部的距离

2、scrollHeight/scrollWidth

   子元素height + 子元素border + 子元素padding + 子元素margin + 父元素的padding = scrollHeight

3、onscroll 当滚动条滚动时触发
// onresize 当窗口大小发生变化时触发

 var num = 0;
window.onscroll = function(){
    document.title = num++;
};
window.onresize = function(){
    document.title = num++;
}

---

   console.log(oBox1.offsetWidth); //占位宽 width + padding + border
    console.log(oBox1.offsetHeight); //170

    console.log(oBox1.offsetTop); //当前元素到定位父级元素顶部的距离；如果没有定位父级，找body
 
    console.log(oBox.clientWidth); // 内容的可视区域 width + padding

    console.log(document.documentElement.clientWidth); //当前窗口可视区的宽度
    console.log(document.documentElement.clientHeight); //当前窗口可视区的高度

1、offset

*       offsetTop：当前元素到定位父级元素顶部的距离
*       offsetLeft
*       offsetWidth：占位宽 width + padding + border
*       offsetHeight

2、client

*       clientTop：边框的宽度
*       clientLeft
*       clientWidth：可视区的尺寸 width + padding
*       clientHeight

3、scroll

*       scrollTop：可视区的顶部到页面顶部的距离
*       scrollLeft
*       scrollWidth：实际尺寸
*       scrollHeight!