我们知道，获取元素在页面视口中的位置，一共有两种方法，
一种为利用相对偏移的方法
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) {
}
