可视区域就是我们浏览网页的设备肉眼可见的区域。

在开发总，我们经常需要判断目标元素是否在可视区域内或者可视区域的距离小于一个值，从而实现一些常用的功能，比如：

• 图片懒加载
• 列表的无限滚动
• 计算广告元素的曝光情况
• 可点击链接的预加载

实现方式

判断一个元素是否在可视区域，常用的几个方法：

• offsetTop、scrollTop
• getBoundingClientRect
• intersection Observer

offsetTop：元素的上边框到包含元素的上内边距之间的距离。

clientWidth：元素内容宽度加上左右内边距宽度，clientWidth = content + padding
clientHeight：元素内容高度加上上下内边距的高度，clientHeight = content + padding

scrollTop：和scrollLeft属性可以确认元素当前滚动的状态，也可以设置元素的滚动位置。scrollWidth和scrollHeight主要是用来确认元素内容的实际大小。

实现代码：

function isInViewPortOfOne(el) {// viewPortHeight const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeightconst offsetTop = el.offsetTopconst scrollTop = document.documentElement.scrollTopconst top = offsetTop - scrollTopreturn top <= viewPortHeight
}

getBoundingClientRect

返回值是一个DOMRect对象，拥有left，top，right，bottom，x，y，width，height

const target = document.querySelector('.target');
const clientRect = target.getBoundingClientRect();
console.log(clientRect);
// {
// bottom: 556.21875,
// height: 393.59375,
// left: 333,
// right: 1017,
// top: 162.625,
// width: 684
// }

在页面发生滚动的时候，top和left属性都发生改变，如果一个元素在可是窗口内的话，那么它一定满足这四个条件：

1. top大于等于0
2. left大于等于0
3. bottom小于或者等于可视窗后高度
4. right小于等于可视窗口宽度

实现代码：

function isInViewPort(element) {const viewWidth = window.innerWidth || document.documentElement.clientWidth;const viewHeight = window.innerHeight || document.documentElement.clientHeight;const {top,right,bottom,left,} = element.getBoundingClientRect();return (top >= 0 &&left >= 0 &&right <= viewWidth &&bottom <= viewHeight);
}

intersection Observer

这是重叠观察者，从这个命名就可以看出它用来判断两个元素是否重叠，因为不用进行事件监听，性能方面比getBoundingClientRect会好很多，使用步骤分为两步：

1、 创建观察者：

const options = {// 表示重叠面积占被观察者的比例，从0-1 取值// 1 表示完全被包含threshold: 1.0,root: document.querySelector('#scrollArea') // 必须是目标元素的父级元素
};
const callback = function (entries, observer) {entries.forEach(entry => {entry.time; // entry.rootBounds; // entry.boundingClientRect; // entry.intersectionRect; // entry.intersectionRatio; // entry.target; // });
}
const observer = new IntersectionObserver(callback, options);

2、传入白观察者
通过observer.observe(target)，可以注册被观察者

const target = document.querySelector('.target');
observer.observe(target);

这仅仅是一个思路，在具体的开发环境，具体分析。