目录
用途
可视区域:浏览网页的设备肉眼可见的区域
- 图片懒加载
- 列表的无限循环滚动
- 计算广告元素的曝光情况
- 可点击链接的预加载
实现方式
- offsetTop 元素的上边框至包含元素的上内边框之间的像素距离
- clientWidth 元素内容区宽度加上左右内边距宽度(clientWidth = content + padding)
- clientHeight 元素内容区高度加上上下内边距高度(clientHeight = content + padding)
- scrollTop+scrollLeft 属性既可以确定元素当前滚动的状态,也可以设置元素的滚动位置
- 垂直滚动 scrollTop > 0
- 水平滚动 scrollLeft > 0
- 将元素的 scrollLeft 和 scrollTop 设置为 0,可以重置元素的滚动位置
- scrollWidth+scrollHeight 主要用于确定元素内容的实际大小
- 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 大于等于 0
- left 大于等于 0
- bottom 小于等于视窗高度
- 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 ); }
- 如果一个元素在视窗之内的话,那么它一定满足下面四个条件
- 当页面发生滚动的时候,top与left属性值都会随之改变
- 返回值是一个 DOMRect对象,拥有left, top, right, bottom, x, y, width, 和 height属性
- Intersection Observer
Intersection Observer 即重叠观察者,从这个命名就可以看出它用于判断两个元素是否重叠,因为不用进行事件的监听,性能方面相比getBoundingClientRect会好很多
创建观察者
const options = {
// 表示重叠面积占被观察者的比例,从 0 - 1 取值,
// 1 表示完全被包含
threshold: 1.0,
root:document.querySelector('#scrollArea') // 必须是目标元素的父级元素
};
const callback = (entries, observer) => { ....}
const observer = new IntersectionObserver(callback, options);
通过new IntersectionObserver创建了观察者 observer,传入的参数 callback 在重叠比例超过 threshold 时会被执行
callback回调函数常用属性
// 上段代码中被省略的 callback const callback = function(entries, observer) { entries.forEach(entry => { entry.time; // 触发的时间 entry.rootBounds; // 根元素的位置矩形,这种情况下为视窗位置 entry.boundingClientRect; // 被观察者的位置举行 entry.intersectionRect; // 重叠区域的位置矩形 entry.intersectionRatio; // 重叠区域占被观察者面积的比例(被观察者不是矩形时也按照矩形计算) entry.target; // 被观察者 }); };
传入被观察者
通过 observer.observe(target) 这一行代码即可简单的注册被观察者
const target = document.querySelector('.target');
observer.observe(target);
应用场景
创建了一个十万个节点的长列表,当节点滚入到视窗中时,背景就会从红色变为黄色