山东天齐建设集团网站,可以做签名链接的网站,25亿企业网站管理系统,杭州设计 公司 网站建设文章目录 一、用途二、实现方式offsetTop、scrollTopgetBoundingClientRectIntersection Observer创建观察者传入被观察者 三、案例分析参考文献 一、用途
可视区域即我们浏览网页的设备肉眼可见的区域#xff0c;如下图 在日常开发中#xff0c;我们经常需要判断目标元素是… 文章目录 一、用途二、实现方式offsetTop、scrollTopgetBoundingClientRectIntersection Observer创建观察者传入被观察者 三、案例分析参考文献 一、用途
可视区域即我们浏览网页的设备肉眼可见的区域如下图 在日常开发中我们经常需要判断目标元素是否在视窗之内或者和视窗的距离小于一个值例如 100 px从而实现一些常用的功能例如
图片的懒加载列表的无限滚动计算广告元素的曝光情况可点击链接的预加载 二、实现方式
判断一个元素是否在可视区域我们常用的有三种办法 offsetTop、scrollTop getBoundingClientRect Intersection Observer
offsetTop、scrollTop
offsetTop元素的上外边框至包含元素的上内边框之间的像素距离其他offset属性如下图所示 下面再来了解下clientWidth、clientHeight
clientWidth元素内容区宽度加上左右内边距宽度即clientWidth content paddingclientHeight元素内容区高度加上上下内边距高度即clientHeight content padding
这里可以看到client元素都不包括外边距
最后关于scroll系列的属性如下
scrollWidth 和 scrollHeight 主要用于确定元素内容的实际大小scrollLeft 和 scrollTop 属性既可以确定元素当前滚动的状态也可以设置元素的滚动位置 垂直滚动 scrollTop 0水平滚动 scrollLeft 0 将元素的 scrollLeft 和 scrollTop 设置为 0可以重置元素的滚动位置
注意
上述属性都是只读的每次访问都要重新开始
下面再看看如何实现判断
公式如下
el.offsetTop - document.documentElement.scrollTop viewPortHeight代码实现
function isInViewPortOfOne (el) {// viewPortHeight 兼容所有浏览器写法const viewPortHeight window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight const 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属性值都会随之改变
如果一个元素在视窗之内的话那么它一定满足下面四个条件
top 大于等于 0left 大于等于 0bottom 小于等于视窗高度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
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);三、案例分析
实现创建了一个十万个节点的长列表当节点滚入到视窗中时背景就会从红色变为黄色
html结构如下
div classcontainer/divcss样式如下
.container {display: flex;flex-wrap: wrap;
}
.target {margin: 5px;width: 20px;height: 20px;background: red;
}往container插入1000个元素
const $container $(.container);// 插入 100000 个 div classtarget/div
function createTargets() {const htmlString new Array(100000).fill(div classtarget/div).join();$container.html(htmlString);
}这里首先使用getBoundingClientRect方法进行判断元素是否在可视区域
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;
}然后开始监听scroll事件判断页面上哪些元素在可视区域中如果在可视区域中则将背景颜色设置为yellow
$(window).on(scroll, () {console.log(scroll !);$targets.each((index, element) {if (isInViewPort(element)) {$(element).css(background-color, yellow);}});
});通过上述方式可以看到可视区域颜色会变成黄色了但是可以明显看到有卡顿的现象原因在于我们绑定了scroll事件scroll事件伴随了大量的计算会造成资源方面的浪费
下面通过Intersection Observer的形式同样实现相同的功能
首先创建一个观察者
const observer new IntersectionObserver(getYellow, { threshold: 1.0 });getYellow回调函数实现对背景颜色改变如下
function getYellow(entries, observer) {entries.forEach(entry {$(entry.target).css(background-color, yellow);});
}最后传入观察者即.target元素
$targets.each((index, element) {observer.observe(element);
});可以看到功能同样完成并且页面不会出现卡顿的情况 参考文献
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRecthttps://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API 希望本文能够对您有所帮助如果您有任何问题或建议请随时在评论区留言联系 章挨踢章IT 谢谢阅读
