谈谈获取当前元素到页面各个部分的距离问题

哈喽，大家好哇！今天大冰块来谈谈获取当前元素到页面各个部分的距离问题。

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

我特意用PS做了一张图：

例如：

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

这样是不是就简单很多了~

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

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
复制代码

如果本文对你有帮助，别再只是悄悄收藏啦！大胆点儿，比如点个赞呀，关注大冰块呀，一起和大冰块学习更多好玩的技术博客吧！