[转载]获取当前元素到页面底部的距离及其他获取距离问题

转载自：https://blog.csdn.net/weixin_42557996/article/details/103158928

在我们进行懒加载的逻辑时，经常会遇到各种获取距离问题，比如获取当前元素到页面底部的距离，获取文档网页底部到可视区窗口距离，获取…
大脑想象图形化比较困难的同学就会感觉很绕很麻烦，其实我们只需要获取到这五个值，就可以当前页面中存在的各种距离了

我特意做了一张图：

转载者注：
el.offsetTop 可以获取元素到父亲元素顶部的距离，于是以下代码可以获取元素到页面顶部的距离：
function getElementToPageTop(el) {
if(el.parentElement) return this.getElementToPageTop(el.parentElement) + el.offsetTop
return el.offsetTop
}

例如：

**

文档底部与可视区窗口底部的距离 = 文档总高度 - 文档滚动高度 - 可视区窗口高度
　
当前元素与底部的距离 = 可视区窗口高度 + 文档滚动高度 - 当前元素与页面顶部距离 - 当前元素高度

**
这样就简单很多了
附获取高度代码：（获取这些高度的方法很多，这里就不一一列出来了）

console.log(window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0) // 文档滚动高度
console.log($(document).height()) // 文档总高度
console.log(document.documentElement.clientHeight) // 可视区窗口高度
console.log($('xxx').height()) // 当前元素高度
console.log($('xxx').offset().top) // 当前元素与页面顶部距离

网页可见区域宽：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

转载自：https://blog.csdn.net/weixin_42557996/article/details/103158928