获取页面的各种距离

vue 中使用

created(){
	this.listenerFunction();
},
beforeDestroy() {
    document.removeEventListener("scroll", this.listenerFunction);
},
methods:{
	listenerFunction() {
      document.addEventListener("scroll", this.handleScroll, true);
    },
    handleScroll(e) {
      if (
        e.target.scrollHeight < 2000 &&
        e.target.offsetHeight + e.target.scrollTop >= e.target.scrollHeight - 10
      ) {
        this.staffShow = true;
      }
      if (
        e.target.scrollHeight > 2000 &&
        e.target.offsetHeight + e.target.scrollTop >= e.target.scrollHeight - 10
      ) {
        this.employeeShow = true;
      }
    },
}

以下引用于：
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42557996/article/details/103158928

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

我特意做了一张图：

例如：

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

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

	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