获取元素离页面视口位置的区别

我们知道，获取元素在页面视口中的位置，一共有两种方法，

一种为利用相对偏移的方法

function getOffsetPosition(ele) {
  var left = 0;
  var top =0;
  while(ele) {
      left += ele.offsetLeft;
      top += ele.offsetTop;
      ele = ele.offsetParent;
  }
  return {left, top}
}

一种为利用getBoundingClientRect

var rect = ele.getBoundingClientRect()
// rect --> {left, top, right, bottom}

上面这两种方式有和区别呢？

1. 利用offset方法获取的值是静态的，即一旦这个元素存在dom中，它这个值就直接固定下来了了，它的top border外边框到值为 html元素的内边框border top， 它的left为border外边框left 到 html元素的的内边框 border left （即可用理解成相对于页面文档的位置）

2. 利用getBoundingClientRect获取的值是动态的，它会实时的获取当前元素相于对应窗口视口的位置

举例说明吧

可以直接滚动分析数据

应用

如何判断一个元素是否可见呢？
简单判断一个元素是否在视口呢
方法1 现在 出现在视口中：

var viewportHeight = Math.max(document.documentElement.clientHeight, document.body.clientHeight);
var {top, bottom} = targetEle.getBoundingClientRect();
if (bottom > 0 && top < viewportHeight) {
  // 现在出现在视口中
}

方法2 曾经 出现在视口中；

var viewportHeight = Math.max(document.documentElement.clientHeight, document.body.clientHeight);
var scrollTop = document.body.scrollTop;
var top = getOffsetPosition(targetEle).top;
// 视口最低线在 元素 top 之下， 说明已经出现过视口中了
if ((viewportHeight + scrollTop - top) > 0) {
}