dom元素各种高度

获取body的滚动高度

环境：chrome浏览器

1. 有h5文档声明： Standard 模式下
   document.body.scrollTop 一直为0
   document.documentElement.scrollTop 获取正确
   window.pageYOffset 获取正确
2. 无文档声明
   document.body.scrollTop 获取正确
   document.documentElement.scrollTop 一直为0
   window.pageYOffset 获取正确

兼容写法：let height = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset

dom对象中六种高度区分

// 示例 屏幕宽度414, div宽度100%

  

    

  


// p-padding ,b-border, h-height, w-width
1. height
document.querySelector('#out').clientHeight    340  300(h) + 20(p)*2 
document.querySelector('#out').offsetHeight    360  300(h) + 20(p)*2  + 10(h)*2
document.querySelector('#out').scrollHeight    540  500(h) + 20(p)*2
 
2. width
document.querySelector('#out').clientWidth    394  414(w) - 10(b)*2 
document.querySelector('#out').offsetWidth    414  414(w)
document.querySelector('#out').scrollWidth    394  414(w) - 10(b)*2 

3.top 向下滚动inner一定100px
document.querySelector('#out').clientTop    10   边框10
document.querySelector('#out').offsetTop    100  margin 100
document.querySelector('#out').scrollTop    100  滚动 100

document.querySelector('#inner').clientTop    0       0
document.querySelector('#inner').offsetTop    130      100 + 20 + 10
document.querySelector('#inner').scrollTop    0        无滚动

3.left 向下滚动inner一定100px
document.querySelector('#out').clientLeft   10   边框10
document.querySelector('#out').offsetLeft   0  
document.querySelector('#out').scrollLeft      0  

总结

1. clientHeight 元素高度（不含boder）
2. offsetHeight 元素高度（含boder）
3. scrollHeight 滚动元素总高度
4. scrollTop 滚动高度（隐藏部分）
5. clientTop 上边框高度
6. offsetTop 相对于offsetParent的高度。offsetParent：距离元素最近的一个具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合条件，offsetParent为body。
7. 当dom元素为doument.body或者document.documentElement时，clientHeight 等于屏幕高度。