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

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

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

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}

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

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

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

举例说明吧

可以直接滚动分析数据

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
    html {
      margin-top: 50px;
    }
    body {
      margin-top: 20px;
      height: 1000px;
      background: yellow;
    }

    #container {
      width: 100px;
      height: 100px;
      overflow: scroll;
      overflow-x: hidden;
      background: green;
    }

    #scroll {
      background: red;
      height: 300px;
      width: 20px;
    }
    </style>
  </head>
<body>
  <div id="container">
    <div id="scroll">
    </div>
  </div>

<script type="text/javascript">

var c = document.getElementById("container");
var s = document.getElementById("scroll");

// 通过内滚动分析
c.onscroll = function() {
  console.log(s.offsetTop);
  console.log(s.getBoundingClientRect().top);
  
}

// 通过body滚动分析
document.body.onscroll = function() {
  console.log('offsetTop', s.offsetTop);
  console.log('boundingClientRect', s.getBoundingClientRect().top);
}

</script>

</body>
</html>

应用

如何判断一个元素是否可见呢？
简单判断一个元素是否在视口呢
方法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) {
}

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

举例说明吧

应用

推荐阅读更多精彩内容