移动端懒加载需要监听文档高度。以下是提供的所有方法
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth //屏幕高度
然而在移动端有很多都无法使用
获取屏幕高度使用window.screen.height,//屏幕高度
使用:document.body.scrollHeight可在手机上获取到实际文档高度，但chrome调试始终获取为0；
document.documentElement.scrollHeight 在chrome调试上有效，在实际机器上无效
调试上实际上还是在pc端上，所以很明显document.body无法再pc端上被识别，document.documentElement.scrollHeight无法再移动端上被识别
若要同时兼容要写函数，但对于监听滚动端的函数来说消耗比较大，目前我还不知道两全的办法
1. clientHeight和clientWidth用于描述元素内尺寸，是指 元素内容+内边距 大小，不包括边框（IE下实际包括）、外边距、滚动条部分
2. offsetHeight和offsetWidth用于描述元素外尺寸，是指 元素内容+内边距+边框，不包括外边距和滚动条部分
3. clientTop和clientLeft返回内边距的边缘和边框的外边缘之间的水平和垂直距离，也就是左，上边框宽度
4. offsetTop和offsetLeft表示该元素的左上角（边框外边缘）与已定位的父容器（offsetParent对象）左上角的距离
5. offsetParent对象是指元素最近的定位（relative,absolute）祖先元素，递归上溯，如果没有祖先元素是定位的话，会返回null
补充:我思考了一下,document.documentElement获取的文档根节点，移动端alert也获取的到此对象。那么只能解释并不是document.documentElement在移动端上无法获取到文档高度，而是因为我是用vue开发，且使用过渡需对组件进行定位。
那么就是
document.documentElement在移动端上不代表文档高档高度而是根元素高度因为子元素定位所以文档高度不算入定位元素，docuemnt.body则能包含定位元素；
在pc端上面则相反
posted on
