地方网站建设,鞍山兼职吧,广州好蜘蛛网站建设公司,吕梁推广型网站建设前言
在日常开发中#xff0c;我们经常需要判断目标元素是否在视窗之内或者和视窗的距离小于一个值#xff08;例如 100 px#xff09;#xff0c;从而实现一些常用的功能#xff0c;例如#xff1a;
图片的懒加载列表的无限滚动计算广告元素的曝光情况可点击链接的预加…前言
在日常开发中我们经常需要判断目标元素是否在视窗之内或者和视窗的距离小于一个值例如 100 px从而实现一些常用的功能例如
图片的懒加载列表的无限滚动计算广告元素的曝光情况可点击链接的预加载
实现方式
判断一个元素是否在可视区域我们常用的有offsetTop、scrollTop和getBoundingClientRect
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);
} 最后
整理了一套《前端大厂面试宝典》包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法一共201道面试题并对每个问题作出了回答和解析。 有需要的小伙伴可以点击文末卡片领取这份文档无偿分享
部分文档展示
文章篇幅有限后面的内容就不一一展示了
有需要的小伙伴可以点下方卡片免费领取
