简易教程：JavaScript 获取元素操作位置（一次讲解足够）
最编程
2024-02-20 10:25:05
...
在网页制作过程中，如果需要知道元素的确切位置。下面这个教程以及案例会对你有帮助：
一、网页的大小和浏览器窗口的大小
- 网页的大小通常由于2个因素决定：1. 网页内容的大小 2.CSS样式表
- 浏览器的大小：通常指的是浏览器窗口中看到的那部分网页面积，又叫做viewport(视口)。
- 如果网页内容能够在浏览器窗口全部显示（不出现滚动条的情况下），那么网页大小和浏览器的大小是相同的。如果不能全部显示，则浏览器会出现滚动条（高度展示不全，则Y轴上出现滚动条，宽度展示不全，则X轴出现滚动条）
二、获取网页的大小
元素自身的大小 offsetWidth、offsetHeight
offsetWidth = content + (垂直滚动条的宽度) + padding + border
- 网页的每个元素都有clientHeight和clientWidth属性。这两个属性指元素的内容部分再加上padding的所占据的视觉面积，不包括border和滚动条占用的位置。
offsetParent
element.offsetParent定义：包含element的祖先元素中，层级最近的定位元素，offsetParent必须满足3个条件
- 1.是element的祖先元素
- 2.最靠近element
- 3.是定位元素，即position属性不为static
<div class="position-outer" style="position: relative;">
<div class="position-inner" style="postion: relative;">
<div class="not-position">
<div class="box">
</div>
</div>
</div>
</div>
输出box元素的offsetParent: box:有3个祖先元素：
- 层级为3的定位元素 position-outer
- 层级为2个定位元素 position-inner
- 层级为1定位元素 not-position 所以：positon-inner才同时满足上面关于offsetParent的3个条件
获取网页元素的绝对位置 offsetLeft/offsetTop
定义：element相对于offsetParent左边界的偏移值 计算element相对于整个文档流的偏移
// 最近的父元素定位的position偏移 + 元素距离父元素的距离
var acturalTop = element.offsetParent.offsetLeft + element.offsetLeft;
此处可以根据offsetLeft与offsetTop api实现商城购物常见的放大镜效果
放大镜效果代码实现
获取元素的相对位置
element.scrollLeft ：返回元素左边缘与视图之间的距离，这里的视图指的是元素的内容（包括子元素以及内容）。
element.scrollTop ：返回元素上边缘与视图之间的距离
clientWidth：返回元素不包含border的padding + 内容的宽度
clientHeight:返回元素不包含border的padding + 内容的高度
有了元素的绝对位置，获取相对位置则容易了，只要将绝对值减去页面的滚动条的距离就可以了。滚动条滚动的垂直距离，是document.scrollTop属性；滚动条滚动的水平距离是document.scrollLeft属性。
//1. 获取文档卷出去的高度
contentScrollTop = document.body.scrollTop || document.documentElement.scrollTop;
//2.如下图所示，如何获取paragraph距离文档的距离
var paragraphViewLeft = paragraph.offsetParent.offsetLeft - paragraph.scrollLeft;
var paragraphViewTop = paragraph.offsetParent.offsetTop - paragraph.scrollTop;
scrollWidth和scrollHeight
element.scrollWidth：返回元素的整体宽度，包括由于溢出而无法展示在网页的不可见部分。 element.scrollHeight ：返回元素的整体高度，包括由于溢出而无法展示在网页的不可见部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
<style>
#parent_div{
width: 200px;
height: 180px;
background: skyblue;
overflow: auto;
}
#children_div{
width: 300px;
height: 320px;
background:green;
color: white;
}
</style>
</head>
<body>
<div id="parent_div">
<div id="children_div">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab praesentium consectetur, eligendi odit labore blanditiis repudiandae quam quia, atque eius ipsam suscipit quaerat in dicta. Soluta quasi quam eveniet ex.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus voluptate error fugiat dignissimos doloremque veritatis reiciendis illum hic repudiandae nobis a tempore quae accusamus, ab architecto suscipit assumenda dolorem explicabo.
</div>
</div>
<script>
// 输出儿子元素的实际大小包括卷出去的宽高
console.log(children_div.scrollWidth, children_div.scrollHeight)
</script>
</body>
</html>
通过scrollHeight属性与scrollTop()方法，实现无线下拉滚动
//滚动加载新的列表
$("#comment_list_box").scroll(() =>{
var nScrollHeight = 0; //默认元素的高度与滚出去的高度为0
var nScrollTop = 0; //元素距离父元素的滚出去的高度
var nDivHight = $("#comment_list_box").height();
nScrollHight = $("#comment_list_box")[0].scrollHeight;
nScrollTop = $("#comment_list_box").scrollTop();
console.log(nDivHight, nScrollHight, nScrollTop);
// 如果滚动到距离底部100px的地方 && 下拉列表没有处于loading状态 && 下拉列表的ajax请求处于finsh的状态（避免上一次的请求未结束再次请求）
if(nScrollTop + nDivHeight >= nScrollTop - 100 && !this.isFinish && !this.isLoading) {
// 拉取下拉列表的数据
this.initList(); //加载相应页码的数据
}
})
无限下拉滚动实现的效果图
获取元素位置快速的方法
- getBoundingClientRect()方法，其中包括了left,right,top,bottom四个属性，分别对应左上角与右下角距离窗口的距离
获取元素的相对位置：
var X = this.getBoundingClientRect().left;
var Y = this.getBoundingClientRect().top;
//再加上滚动出去的距离，就可以得到元素的绝对位置
var X = this.getBoundingClientRect().left + document.documentElement.scrollLeft;
var Y = this.getBoundingClientRect().top + document.docuemtElement.scrollTop;
参考文档：
阮一峰老师的关于元素位置
scrollWidth、scrollHeight、scrollLeft 、scrollTop 详解