前言
本片文章全面总结了一些和位置计算相关的api方法；一些是我们常用的，也有些我们不经常用会陌生，所以就有了这篇文章的由来，在此详细的一一列举说明，在需要用到时候方便查看。
非元素本身方法
屏幕
- screenX：鼠标事件发生时，鼠标相对于屏幕左边的位置；
- screenY：鼠标事件发生时，鼠标相对于屏幕顶部的位置；
浏览器视口
- clientX：鼠标事件发生时，鼠标相对于浏览器视口左边的位置；
- clientY：鼠标事件发生时，鼠标相对于浏览器视口顶部的位置；
页面
- pageX：鼠标事件发生时，鼠标相对于页面左边的位置；
- pageY：鼠标事件发生时，鼠标相对于页面上边的位置；
触发事件对象
- offsetX：鼠标事件发生时，鼠标相对于当前触发事件对象左边的位置；
- offsetY：鼠标事件发生时，鼠标相对于当前触发事件对象上边的位置；
元素自身
可见
- element.clientWidth：返回元素的可见宽度，包含内边距; padding-left-width + width + padding-right-width
- element.clientHeight：返回元素的可见高度，包含内边距；padding-top-width + height + padding-bottom-width
- element.clientLeft：返回元素左边框的宽度;
- element.clientTop：返回元素的上边框的宽度;
整体
element.scrollWidth: 元素的整体宽度，包括由于益出而无法展示在网页可见部分； element.scrollHeight：元素的整体高度，包括由于益出而无法展示在网页可见部分； element.scrollLeft：当容器中的内容宽度大于容器本身宽度，将存在水平方向滚动条，返回-容器中的内容-超出-容器左边界-我们看不见的那部分尺寸。 element.scrollTop: 当容器中的内容高度大于容器本身高度，将存在垂直方向滚动条，返回-容器中的内容-超出-容器上边界-我们看不见的那部分尺寸。
偏移
- element.offsetWidth: 元素在水平方向占据的大小；bordr-left-width + clientWidth + border-right-width;
- element.offsetHeight：元素在垂直方向占据的大小；bordr-top-width + clientHight + border-bottom-width;
- element.offsetLeft: 表示元素的上外边框至offsetParent元素的上内边框之间的像素距离;
- element.offsetTop: 表示元素的左外边框至offsetParent元素的左内边框之间的像素距离
获取最近定位祖先元素
- element.offsetParent:是指元素最近的定位（relative,absolute）祖先元素,如果没有祖先元素是定位的话，会指向body元素。
常用计算
获取浏览器窗口(window)的滚动条位置
window.addEventListener("scroll", (event) => {
let scrollY = this.scrollY;
let scrollX = this.scrollX;
console.log(scrollY);
console.log(scrollX);
});
获取元素的滚动条位置
const element = document.getElementById('app');
console.log(element.scrollLeft)
console.log(element.scrollTop)
获取浏览器窗口(window)滚动条距离底部的距离
window.addEventListener('scroll', (e) => {
// 获取文档内容的实际高度(包含滚动条，padding)
let scrollHeight = window.scrollHeight || document.body.scrollHeight || document.documentElement.scrollHeight
// 获取窗口的可视高度(不包含滚动条)
let clientHeight = window.clientHeight || document.body.clientHeight || document.documentElement.clientHeight
// 获取滚动条距离顶部的位置
let scrollTop = window.screenTop || document.body.scrollTop || document.documentElement.scrollTop
// 获取滚动条距离底部的高度
let scrollBottomHeight = scrollHeight - scrollTop - clientHeight
console.log('底部距离====>', Math.ceil(scrollBottomHeight));
})
总结
简单列举了位置判断相关方法的定义和使用；没有写过多的使用例子，因为大部分都是些只读获取属性，所以简单看下大概就知道如何使用。如有问题，欢迎评论交流，欢迎点赞收藏。
