1. window.pageXOffset和window.pageYOffset
window.pageXOffset代替window.scrollX获取页面X轴方向滚动位移,window.pageYOffset代替window.scrollY获取页面Y轴方向滚动位移,其优点在于可以兼容IE(>=9)。
2. Element.scrollHeight和 Element.clientHeight和Element.offsetHeight
Element.scrollHeight是元素内容的高度,包括 padding、::before 和 ::after元素,不包括border和margin。
Element.clientHeight表示元素的视口高度,包括padding,不包括border和margin和水平滚动条。
Element.offsetHeight返回该元素的像素高度,高度包含该元素的padding和border,且是一个整数。
3. Element.offsetLeft Element.offsetTop
offsetLeft表示元素左边到父级元素的距离,offsetTop表示元素上边到父级元素的距离。
4. Element.getBoundingClientRect()
返回一个RectDOM,包含height、width、left、right、top、bottom、x、y,都是表视口的。
4. window.getComputedStyle(element)
获取某一元素的样式,如果要获取具体某一样式,可以如:getComputedStyle(demo).height
总结
getClientHeight兼容性较好,建议优先使用,同时返回值包含小数;
表视口的都不包含border。