获取页面元素位置

引子

最近在尝试一个东西的时候，再次碰到需要获取元素的位置，这次还是自己来整理一下。

• Origin
• My GitHub

基本属性信息

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;
}

参考资料

• Element.clientHeight
• Element.clientWidth
• Window.innerHeight
• Window.innerWidth
• Window.outerHeight
• Window.outerWidth
• HTMLElement.offsetLeft
• HTMLElement.offsetParent
• scrollTop
• scrollLeft