安卓搭建网站,linux html转wordpress,宣传 网站建设,腾讯云cdn加速wordpress可视区域就是我们浏览网页的设备肉眼可见的区域。
在开发总#xff0c;我们经常需要判断目标元素是否在可视区域内或者可视区域的距离小于一个值#xff0c;从而实现一些常用的功能#xff0c;比如#xff1a;
图片懒加载列表的无限滚动计算广告元素的曝光情况可点击链接…可视区域就是我们浏览网页的设备肉眼可见的区域。
在开发总我们经常需要判断目标元素是否在可视区域内或者可视区域的距离小于一个值从而实现一些常用的功能比如
图片懒加载列表的无限滚动计算广告元素的曝光情况可点击链接的预加载
实现方式
判断一个元素是否在可视区域常用的几个方法
offsetTop、scrollTopgetBoundingClientRectintersection 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对象拥有lefttoprightbottomxywidthheight
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
这是重叠观察者从这个命名就可以看出它用来判断两个元素是否重叠因为不用进行事件监听性能方面比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);这仅仅是一个思路在具体的开发环境具体分析。
