【JS场景题】判断一个元素是否在可视区域内有哪些方法?

方法一、通过元素的位置信息和滚动条滚动的高度来判断

前置知识

  • clientWidth: 元素的内容区域宽度加上左右内边距宽度。
  • offsetTop: 元素的上外边框至包含元素的上内边框之间的像素距离。
  • document.documentElement.clientHeight: 获取视口高度(不包含滚动条的隐藏高度)。
  • document.documentElement.scrollHeight:获取浏览器窗口的总高度(包含滚动条的隐藏高度)。
  • document.documentElement.scrollTop: 获取滚动条滚动的高度

代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.div {height: 2000px;}p {height: 200px;color: white;background-color: blueviolet;}</style>
</head>
<body><!-- 1. 通过元素的位置信息和滚动条滚动的高度来判断 --><div class="div"></div><p>我出现啦</p><script>function isContain(dom) {// 获取可视窗口的高度- 兼容写法const screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;// 获取滚动条滚动的高度const scrollTop = document.documentElement.scrollTop;// 获取元素偏移的高度,就是距离可视窗口的偏移量const offsetTop = dom.offsetTop;return offsetTop - scrollTop <= screenHeight;}const p = document.querySelector('p')window.onscroll = () => {if (isContain(p)) {document.body.style.backgroundColor = 'blue'} else {document.body.style.backgroundColor = 'skyblue'}}</script>
</body>
</html>

方法二、通过getBoundingClientRect方法来获取元素的位置信息,然后加以判断

前置知识

  • getBoundingClientRect方法: DOM对象的一个方法,返回一个DOMRect对象。

  • 详解:https://blog.csdn.net/weixin_61597234/article/details/134878221

  • 如果想要判断子元素是否在可视区域内,只需要:

    • top >= 0
    • left >= 0
    • bottom <= 视口高度
    • right <= 视口宽度

代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.div {height: 2000px;}p {height: 200px;color: white;background-color: blueviolet;}</style>
</head>
<body><!-- 2. 通过getBoundingClientRect方法来获取元素的位置信息,然后加以判断 --><div class="div"></div><p>我出现啦</p><script>function isContain(dom) {const totalHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;const totalWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;// 当滚动条滚动时,top、left、bottom、right时刻会发生改变const { top, right, bottom, left } = dom.getBoundingClientRect();return left >= 0 && top >= 0 && right <= totalWidth && bottom <= totalHeight;}const p = document.querySelector('p')window.onscroll = () => {if (isContain(p)) {document.body.style.backgroundColor = 'red'} else {document.body.style.backgroundColor = 'green'}}</script>
</body>
</html>

方法三、通过交叉检查器:Intersection Observer 来实现监听(推荐)

前置知识

MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API

代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.div {height: 2000px;}p {height: 200px;color: white;background-color: blueviolet;}</style>
</head>
<body><!-- 3. 通过交叉检查器:Intersection Observer 来实现监听 --><div class="div"></div><p>我出现啦</p><script>const p = document.querySelector('p')const observer = new IntersectionObserver(entries => {if (entries[0].isIntersecting) {document.body.style.backgroundColor = 'skyblue'} else {document.body.style.backgroundColor = 'orange'}}, {threshold: .2,  // 表示当子元素和父元素覆盖多少时触发回调函数。});observer.observe(p)</script>
</body>
</html>

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

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

相关文章

《Attention Is All You Need》解读

一、简介 “Attention Is All You Need” 是一篇由Ashish Vaswani等人在2017年发表的论文&#xff0c;它在自然语言处理领域引入了一种新的架构——Transformer。这个架构现在被广泛应用于各种任务&#xff0c;如机器翻译、文本摘要、问答系统等。Transformer模型的核心是“自…

小学vr虚拟课堂教学课件开发打造信息化教学典范

在信息技术的浪潮中&#xff0c;VR技术正以其独特的魅力与课堂教学深度融合&#xff0c;引领着教育方式的创新与教学方法的变革。这一变革不仅推动了“以教促学”的传统模式向“自主探索”的新型学习方式转变&#xff0c;更为学生带来了全新的学习体验。 运用信息技术融合VR教学…

深度学习1

1.支持向量机Support Vector Machine&#xff08;SVM&#xff09;是一种对数据二分类的线性分类器&#xff0c;目的是寻找一个超平面对样本进行分割&#xff0c;广泛应用人像识别&#xff0c;手写数字识别&#xff0c;生物信息识别。 二维空间分割界是一条直线&#xff0c;在三…

table = collections.defaultdict(list)申请的字典的类型是什么?

当你使用 collections.defaultdict(list) 来申请一个字典时&#xff0c;这个字典的类型是 defaultdict&#xff0c;但是其行为和表现方式在某些方面与普通的字典&#xff08;dict&#xff09;相似&#xff0c;主要区别在于它如何处理缺失的键。 defaultdict 是 Python 标准库 …

【基础篇】第4章 Elasticsearch 查询与过滤

在Elasticsearch的世界里&#xff0c;高效地从海量数据中检索出所需信息是其核心价值所在。本章将深入解析查询与过滤的机制&#xff0c;从基础查询到复合查询&#xff0c;再到全文搜索与分析器的定制&#xff0c;为你揭开数据检索的神秘面纱。 4.1 基本查询 4.1.1 Match查询…

Java操作Excel最佳实践

Java操作Excel最佳实践 1、背景描述2、Apache POI简介3、Java读取Excel 1、背景描述 2、Apache POI简介 官网&#xff1a;http://poi.apache.org/index.html 官方文档&#xff1a;https://poi.apache.org/apidocs/index.html 3、Java读取Excel 3.1、导入依赖 <dependency…

Qt——升级系列(Level Seven):事件、文件

目录 Qt事件 事件介绍 事件的处理 按键事件 鼠标事件 定时器 事件分发器 事件过滤器 Qt文件 Qt文件概述 输入输出设备类 文件读写类 文件和目录信息类 Qt事件 事件介绍 事件是应⽤程序内部或者外部产⽣的事情或者动作的统称。在 Qt 中使⽤⼀个对象来表⽰⼀个事件。所有的 Qt …

工商业光伏项目如何快速开发?

一、前期调研与规划 1、屋顶资源评估&#xff1a;详细测量屋顶面积、承重能力及朝向&#xff0c;利用光伏业务管理软件进行日照分析和发电量预测&#xff0c;确保项目可行性。 2、政策与补贴研究&#xff1a;深入了解当地政府对工商业光伏项目的政策支持和补贴情况&#xff0…

Java面试过程中遇到的问题

Java面试过程中遇到的问题 介绍工作经验项目 介绍项目 为什么选用这个技术 报表服务怎么实现的 java框架 1、spring clound特性&#xff0c;组件有那些以及作用 springCloud是一套微服务组件&#xff0c; 常用的Eureka&#xff0c;Ribbon&#xff0c;Hystrix&#xff0c;Fe…

第三方支付平台如何完美契合跨境电商?

在全球化的大潮中&#xff0c;跨境电商"Eurasia Boutique"的创始人艾米丽&#xff0c;带着她的梦想和手工艺品&#xff0c;踏上了进入中国市场的征程。这是一个充满挑战和机遇的旅程&#xff0c;艾米丽和她的企业需要面对和解决一系列复杂的问题。 合规的门槛 艾米…

JVM原理(十四):JVM虚拟机运行时栈帧结构

Java虚拟机已方法作为最基本的执行单位。 栈帧&#xff1a;是支持Java虚拟机进行方法调用和方法执行背后的数据结构。 栈帧存储了方法的 局部变量表、操作数栈、动态连接和放回地址等信息。 每一个方法的调用开始和执行结束&#xff0c;都对应着一个栈帧在虚拟机栈里面从入栈…

Linux文件与日志

目录 1. Linux 文件系统 1.1 inode号 1.2 EXT类型文件恢复 1.3 xfs类型文件备份和恢复 2. 日志分析 2.1 日志类型 2.2日志配置文件 2.3 日志分析的重要性 在Linux系统中&#xff0c;文件和日志是管理和维护系统运行所不可或缺的。理解它们的工作原理和如何有效地管理和…

驱动开发:配置Visual Studio驱动开发环境

100编程书屋_孔夫子旧书网 配置驱动开发环境配置驱动开发模板配置驱动双机调试 在正式开始驱动开发之前&#xff0c;需要自行搭建驱动开发的必要环境&#xff0c;首先我们需要安装Visual Studio 2013这款功能强大的程序开发工具&#xff0c;在课件内请双击ISO文件并运行内部的…

2009-2024年第一季度上市公司华证ESG评级季度数据

2009-2024年第一季度上市公司华证ESG评级季度数据 1、时间&#xff1a;2009-2024年第一季度 2、指标&#xff1a;证券代码、证券简称、评级日期、综合评级、综合得分、E评级、E得分、S评级、S得分、G评级、G得分、证监会行业&#xff08;新&#xff09;、同花顺行业&#xff…

Visio框图自动带填充色原因及如何取消

0 Preface/Foreword Visio&#xff0c;Windows的一个流程图&框图制作工具。 1 新建Visio文件 1.1 图形带填充 新建Visio时候&#xff0c;如果选择了模版&#xff0c;那么就后期使用的工具元素会自动填充。 带来的弊端&#xff0c;在元素编辑文字时&#xff0c;如果此时不…

苹果公司的Wifi定位服务(WPS)存在被滥用的风险

安全博客 Krebs on Security 2024年5月21日发布博文&#xff0c;表示苹果公司的定位服务存在被滥用风险&#xff0c;通过 "窃取"WPS 数据库&#xff0c;可以定位部队行踪。 相关背景知识 手机定位固然主要依赖卫星定位&#xff0c;不过在城市地区&#xff0c;密集的…

Perl 语言开发(五):循环语句

目录 1. 循环语句概述 2. while 循环 2.1 基本语法 2.2 示例 2.3 无限循环 3. until 循环 3.1 基本语法 3.2 示例 3.3 无限循环 4. for 循环 4.1 基本语法 4.2 示例 4.3 嵌套循环 5. foreach 循环 5.1 基本语法 5.2 示例 5.3 遍历哈希 6. 循环控制语句 6.1 …

新建Vue工程的几种方法

文章目录 使用CLI2 : vue-cli使用CLI3 : vue/cli使用 vue3构建 &#xff08;内置Vite&#xff09;直接使用Vite使用parcel (最少配置方案) 使用CLI2 : vue-cli vue-cli是针对构建vue的脚手架CLI2&#xff0c;只能新建vue2工程。 全局安装vue-cli之后&#xff0c;构建vue2项目的…

03.C1W2.Sentiment Analysis with Naïve Bayes

目录 Probability and Bayes’ RuleIntroductionProbabilitiesProbability of the intersection Bayes’ RuleConditional ProbabilitiesBayes’ RuleQuiz: Bayes’ Rule Applied Nave Bayes IntroductionNave Bayes for Sentiment Analysis P ( w i ∣ c l a s s ) P(w_i|clas…

大数据领域的深度分析——AI是在帮助开发者还是取代他们?

在大数据领域&#xff0c;生成式人工智能&#xff08;AIGC&#xff09;的应用正在迅速扩展&#xff0c;改变了数据科学家和开发者的工作方式。本文将从大数据的专业视角&#xff0c;探讨AI工具在这一领域的作用&#xff0c;以及它们是如何帮助开发者而非取代他们的。 1. 大数据…