【前端学习——js篇】11.元素可见区域

具体见:https://github.com/febobo/web-interview

11.元素可见区域

①offsetTop、scrollTop

offsetTop,元素的上外边框至包含元素的上内边框之间的像素距离,其他offset属性如下图所示:

下面再来了解下clientWidthclientHeight

  • clientWidth:元素内容区宽度加上左右内边距宽度,即clientWidth = content + padding
  • clientHeight:元素内容区高度加上上下内边距高度,即clientHeight = content + padding

这里可以看到client元素都不包括外边距

最后,关于scroll系列的属性如下:

  • scrollWidthscrollHeight 主要用于确定元素内容的实际大小

  • scrollLeftscrollTop 属性既可以确定元素当前滚动的状态,也可以设置元素的滚动位置

    • 垂直滚动 scrollTop > 0
    • 水平滚动 scrollLeft > 0
  • 将元素的 scrollLeftscrollTop 设置为 0,可以重置元素的滚动位置

  • 上述属性都是只读的,每次访问都要重新开始


判断页面触底我们需要先了解一下下面几个属性:

  • scrollTop:滚动视窗的高度距离window顶部的距离,它会随着往上滚动而不断增加,初始值是0,它是一个变化的值
  • clientHeight:它是一个定值,表示屏幕可视区域的高度;
  • scrollHeight:页面不能滚动时也是存在的,此时scrollHeight等于clientHeight。scrollHeight表示body所有元素的总长度(包括body元素自身的padding)

可视区域即我们浏览网页的设备肉眼可见的区域,如下图

在日常开发中,我们经常需要判断目标元素是否在视窗之内或者和视窗的距离小于一个值(例如 100 px),从而实现一些常用的功能,例如:

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

公式如下:

也就是元素距上外边框的距离 - 滚动视窗距window顶部的距离 ,是否超过了视窗高度。

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
// }

属性对应的关系图如下所示:

当页面发生滚动的时候,topleft属性值都会随之改变。

如果一个元素在视窗之内的话,那么它一定满足下面四个条件:

  • 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);
}
④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);
案例

例子创建了一个十万个节点的长列表,当节点滚入到视窗中时,背景就会从红色变为黄色。

<body><div class="container"></div>
</body>
    .container {display: flex;flex-wrap: wrap;}.target {margin: 5px;width: 20px;height: 20px;background: red;}

首先插入100000个div

	const container = document.querySelector(".container");// 插入 100000 个 <div class="target"></div>function createTargets() {const htmlString = new Array(100000).fill('<div class="target"></div>').join("");container.innerHTML= htmlString;}

判定target是否在视窗中,element是传入的target

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

绑定滑轮事件

 this.addEventListener('scroll',() =>{console.log("scroll!");const target = document.querySelectorAll('.target')for(const element of target){if(isInviewPort(element)){element.style =  "background-color:yellow"}else{element.style =  "background-color:red"}}})

可以看到,没当滑动就会把所有target,依次传入isInviewPort,若在视窗中则改变颜色为黄色,否则改为红色。

通过上面的方法基本实现要求,但是有明显的卡顿,原因在于我们绑定了scroll事件,scroll事件伴随了大量的计算,会造成资源方面的浪费。

下面试试观察者的方法,首先创建一个观察者,然后给每个target进行绑定。

 const observer = new IntersectionObserver(getYellow, { threshold: 1.0 });const target = document.querySelectorAll('.target')for (const element of target) {observer.observe(element)}

最后使用getYellow回调函数实现对背景颜色改变。

 function getYellow(entries, observer) {for (const entry of entries) {let element = entry.target// console.log(element);if (isInviewPort(element)) {element.style = "background-color:yellow"} else {element.style = "background-color:red"}}}

还是有延迟,但是明显好很多。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/774724.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于单片机防丢失设备的设计和实践

摘要:防止老人或者小孩走丢走失,还可以放在汽车里,利用GPS系统,设计实现了基于单片机的防丢失设备。设备利用液晶显示屏显示信息,并实时发送位置短信到手机传输当前位置的纬度和经度坐标,实现了定位与监测功能。测试结果表明,利用该设备和手机可以同时观察老人或小孩携带…

学点儿数据库_Day11_多表、等值连接、内连接、模糊查找

1 多表 学生表、班级表、课程表、班级课程表 关系型数据库&#xff1a; MySql、SqlServer、Oracle 相同的数据出现多次绝不是一件好事&#xff0c;这是关系数据库设计的基础。关系表的设计就是要把信息分解成多个表&#xff0c;一个数据一个表&#xff0c;各表通过某些共同的…

three.js扩展库--物理引擎CannonJS / CannonES

物理引擎概念解释 所谓物理引擎,就是通过代码模拟物理世界。举个简单例子,比如你初高中都学过物理学,其中力、速度、加速度、位移都是比较常见的物理量,咱们通过CannonJS等物理引擎,都可以辅助你计算生活中物体的速度、位移,比如计算一个小球在地球重力的作用下,下落的…

最新版puppeteer 在linux下的安装教程

最新版的 puppeteer 在安装的时候&#xff0c;Chromium不会自动下载&#xff0c;导致安装失败 这个时候需要跳过Chromium的安装&#xff0c;然后手动下载Chromium并安装。 1、先设置npm跳过Chromium下载 export PUPPETEER_SKIP_DOWNLOADtrue 2、安装puppeteer npm i pup…

iOS_convert point or rect 坐标和布局转换+判断

文章目录 1. 坐标转换2. 布局转换3. 包含、相交 如&#xff1a;有3个色块 let view1 UIView(frame: CGRect(x: 100.0, y: 100.0, width: 300.0, height: 300.0)) view1.backgroundColor UIColor.cyan self.view.addSubview(view1)let view2 UIView(frame: CGRect(x: 50.0, …

阿里云服务器优惠价格61元一年,多配置报价,来看看

2024年阿里云服务器优惠价格表&#xff0c;一张表整理阿里云服务器最新报价&#xff0c;阿里云服务器网aliyunfuwuqi.com整理云服务器ECS和轻量应用服务器详细CPU内存、公网带宽和系统盘详细配置报价单&#xff0c;大家也可以直接移步到阿里云CLUB中心查看 aliyun.club 当前最新…

芒果YOLOv7改进88:上采样篇,即插即用,上采样CARAFE:顶会ICCV出品,轻量级通用上采样算子,只引入很少的参数量和计算代价

该专栏完整目录链接: 芒果YOLOv7深度改进教程 芒果专栏 基于 CARAFE 的改进结构,改进源码教程 | 详情如下🥇 👉1. CARAFE 结构 💡本博客 改进源代码改进 适用于 YOLOv7 按步骤操作运行改进后的代码即可 即插即用 结构。博客 包括改进所需的 核心结构代码 文件改进后的…

【MD】激光驱动原子动力学的全尺寸从头算模拟

Zeng Q, Chen B, Zhang S, et al. Full-scale ab initio simulations of laser-driven atomistic dynamics[J]. npj Computational Materials, 2023, 9(1): 213.核心研究内容&#xff1a; 本文研究了激光驱动的原子动力学的全尺度从头算模拟。研究的重点是探讨在极端条件下材料…

maya导入导出bvh 自动 脚本

目录 maya打开脚本编辑器 运行打开bvh脚本 maya导出bvh脚本 maya打开脚本编辑器 打开Maya软件,点击右下角 “脚本编辑器” 运行打开bvh脚本<

数据结构:堆和二叉树遍历

堆的特征 1.堆是一个完全二叉树 2.堆分为大堆和小堆。大堆&#xff1a;左右节点都小于根节点 小堆&#xff1a;左右节点都大于根节点 堆的应用&#xff1a;堆排序&#xff0c;topk问题 堆排序 堆排序的思路&#xff1a; 1.升序排序&#xff0c;建小堆。堆顶就是这个堆最小…

034—pandas 试验一次扔两个骰子和为多少的概率最大

前言 经典的掷骰子试验是我在学习概率中经常接触的例子&#xff0c;这是利用了骰子在赌博游戏中的随机性&#xff0c;方便我们理解概率的意义。 #今天&#xff0c;我们用 Python 来做一个实验&#xff0c;一次掷出两个骰子&#xff0c;每次计算所得点数的和&#xff0c;从而得…

python装饰器的作用

装饰器是Python中的一个特殊语法&#xff0c;用于修改或扩展函数的功能。它可以在不改变原函数代码的情况下&#xff0c;通过在函数定义前使用 装饰器函数 的语法来对函数进行修饰。 装饰器的作用可以总结为以下几点&#xff1a; 函数功能的扩展&#xff1a;装饰器可以在不修改…

搜索与图论——Dijkstra

最短路算法 稠密图与稀疏图 n为点数&#xff0c;m为边数。m远小于n的平方为稀疏图&#xff0c;m接近n的平方为稠密图。 稀疏图用邻接表存&#xff0c;稠密图用邻接矩阵存 朴素版dijkstra时间复杂度为O(n^2),对于稠密图可以ac&#xff0c;但遇到稀疏图时会TLE。 dijkstra函数实…

python函数-变量和参数-2.4

目录 在高阶函数中使用匿名函数 map() 函数&#xff1a; sorted() 函数&#xff1a; filter() 函数&#xff1a; 函数练习-9 在高阶函数中使用匿名函数 map() 函数&#xff1a; 描述&#xff1a; map() 会根据提供的函数对指定序列做映射。 第一个参数 function 以参数序…

USART发送单字节数据原理及程序实现

硬件接线&#xff1a; 显示屏的SCA接在B11&#xff0c;SCL接在B10&#xff0c;串口的RX连接A9&#xff0c;TX连接A10。 新建Serial.c和Serial.h文件 在Serial.c文件中&#xff0c;实现初始化函数&#xff0c;等需要的函数&#xff0c;首先对串口进行初始化&#xff0c;只需要…

【嵌入式DIY实例】-火焰报警系统

DIY火焰报警系统 文章目录 DIY火焰报警系统1、硬件准备2、硬件接线3、代码实现火灾报警器有时也称为烟雾报警器,是一种检测火灾、烟雾和热量并发出警告信号的设备。 它们可以固定在天花板或墙上,让您有更多时间离开那个地方。 如果您的房屋没有安装火灾报警器,您可能不会意识…

速看!MC-CCPIT第二十二届中国国际冶金工业展览会

METALLURGY CHINA 2024 MC-CCPIT第二十二届中国国际冶金工业展览会 ——冶金装备品牌展示区 主办单位&#xff1a;中国钢铁工业协会 中国国际贸易促进委员会冶金行业分会 承办单位&#xff1a;冶金工业国际交流合作中心 地 点&#xff1a;上海新国际博览中心 时 间&am…

第5章 数据建模和设计

思维导图 5.1 引言 最常见的6种模式&#xff1a;关系模式、多维模式、面向对象模式、 事实模式、时间序列模式和NoSQL模式 每种模式分为三层模型&#xff1a;概念模型、逻辑模型和物理模型 每种模型都包含一系列组件&#xff1a;如实体、关系、事实、键和属性。 5.1.1 业务驱…

修改Jupyter Notebook的默认路径,以及在PowerShell中自定义其启动路径

修改Jupyter Notebook的默认路径&#xff0c;以及在PowerShell中自定义其启动路径 设置 Jupyter Notebook 配置文件&#xff0c;修改默认路径要在PowerShell中设置自定义的启动脚本&#xff0c;以确保Jupyter Notebook能够自动定位到当前路径设置后的效果 在使用Jupyter Notebo…

设置asp.net core WebApi函数输入和返回类型中的属性名称开头大小写格式

以下列类型定义为例创建简单的ASP.NET Core的WebApi函数&#xff0c;此时输入参数和返回结果的属性名称开头默认为小写&#xff0c;如下图所示。 public class UserInfo { public string UserName { get; set; }public string UserSex { get; set; }public string UserP…