目录
引子
最近在尝试一个东西的时候，再次碰到需要获取元素的位置，这次还是自己来整理一下。
基本属性信息
clientHeight/clientWidth
var cHeight = element.clientHeight;
var cWidth = element.clientWidth;
- 只读属性，是元素内容内部高度/宽度，包含内边距（padding），不包括水平/垂直滚动条、边框（border）和外边距（margin）。
- 此属性会将获取的值四舍五入取整数。
innerHeight/innerWidth、outerHeight/outerWidth
var iHeight = window.innerHeight;
var iWidth = window.innerWidth;
- 只读属性，浏览器窗口视口的高度。
- 任何表现类似于窗口的任何窗口或对象（例如框架或选项卡）上都是可用的，如 window、frame、frameset 或 secondary window 。
var oHeight = window.outerHeight;
var oWidth = window.outerWidth;
- 只读属性，整个浏览器窗口的高度，包括侧边栏、窗口镶边和窗口调正边框。
offset 相关属性
offset 一类的属性有：offsetTop、offsetLeft、offsetWidth、offsetHeight 。
var oLeft = element.offsetLeft;
var oTop = element.offsetTop;
var oWidth = element.offsetWidth;
var oHeight = element.offsetHeight;
- 只读属性。
offsetTop、offsetLeft相对于元素的 offsetParent 内边距边界的偏移像素值，offsetParent是包含该元素最近的定位元素或者 table、td、th、body 元素。offsetWidth/offsetHeight包含元素的边框(border)、内边距(padding)、滚动条、以及 CSS 设置的宽度（width）/高度（height）的值。- 对于块级元素，以上属性描述相对于
offsetParent；对于行内元素来说，以上属性描述相对于第一个边界框。
scroll 相关属性
scroll 一类属性有：scrollLeft、scrollTop
var sLeft = element.scrollLeft;
var sTop = element.scrollTop;
element.scrollTop = intValue
element.scrollLeft = intValue
- 可读可写。
注意：以下所说的位置，都是指元素左上角相对于另一个元素左上角的坐标。
元素相对于父元素位置
父元素的情况可分为：直接父元素、间接父元素。
下面将问题具体化，主要使用了 offset 相关属性。复杂的布局情况可以依此类推。
对最终位置结果可能会产生影响的因素有：
- 元素的
box-sizing属性 - 元素的
position属性 - 元素的
border属性 - 元素的
padding属性
直接父元素
这是测试页面，移动端访问如下：
间接父元素
这是测试页面，移动端访问如下：
元素是否在滚动可视区
由于不同的布局和 CSS 属性，计算方式可能会有差别，这是一个简单的示例，移动端访问如下：
示例主要判断逻辑
function checkIntoView() {
var scrollEle = document.querySelector('.list');
var scrollEleHeight = scrollEle.offsetHeight;
var itemHeight = -document.querySelector('.item').offsetHeight;
var intoViewEle = [];
var scrollTopDis = scrollEle.scrollTop;
document.querySelectorAll('.item').forEach(function(ele,index) {
var top = ele.offsetTop;
var gap = top - scrollTopDis;
if (gap>itemHeight && gap <=scrollEleHeight) {
if (intoViewEle.indexOf(index)<0) {
var indexNum = index + 1;
intoViewEle.push('元素 '+indexNum)
}
}
})
var showMsg = intoViewEle.join('，');
document.querySelector('#result').innerHTML = '部分或全部已在滚动可视区的元素有：<br />'+showMsg;
}