当前位置: 首页 > news >正文

判断元素是否在可视区域

前言

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

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

实现方式

判断一个元素是否在可视区域,我们常用的有offsetTop、scrollTop和getBoundingClientRect

offsetTop、scrollTop

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

下面再来了解下clientWidthclientHeight

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

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

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

  • scrollWidthscrollHeight 主要用于确定元素内容的实际大小
  • scrollLeftscrollTop 属性既可以确定元素当前滚动的状态,也可以设置元素的滚动位置
    • 垂直滚动 scrollTop > 0* 水平滚动 scrollLeft > 0
  • 将元素的 scrollLeftscrollTop 设置为 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
// } 

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

当页面发生滚动的时候,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);
} 

最后

整理了一套《前端大厂面试宝典》,包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法,一共201道面试题,并对每个问题作出了回答和解析。

有需要的小伙伴,可以点击文末卡片领取这份文档,无偿分享

部分文档展示:



文章篇幅有限,后面的内容就不一一展示了

有需要的小伙伴,可以点下方卡片免费领取

相关文章:

判断元素是否在可视区域

前言 在日常开发中&#xff0c;我们经常需要判断目标元素是否在视窗之内或者和视窗的距离小于一个值&#xff08;例如 100 px&#xff09;&#xff0c;从而实现一些常用的功能&#xff0c;例如&#xff1a; 图片的懒加载列表的无限滚动计算广告元素的曝光情况可点击链接的预加…...

告别传统繁杂的采购合同管理 打造企业自动化采购管理模式

随着企业竞争日趋激烈&#xff0c;采购成本压力剧增&#xff0c;企业对于采购合同管理更加严格&#xff0c;从而把控物资成本。对于任何一家企业采购来说&#xff0c;规范化合同的全面管理&#xff0c;是采购活动中重要的一个环节。 但在如今&#xff0c;依旧有很多企业采购合…...

【prism】路由事件映射到Command命令

在之前的一篇文章中&#xff0c;我介绍了普通的自定义事件&#xff1a; 【wpf】自定义事件总结&#xff08;Action&#xff0c; EventHandler&#xff09;_code bean的博客-CSDN博客_wpf action可以说通过Action和EventHandle&#xff0c;自定义事件是相当的方便简单了。https…...

面向对象的基本概念和方法

面向对象的开发方法在近几十年见得以广泛应用&#xff0c;我们常见的Java语言就是一种典型的面向对象的开发语言。然而&#xff0c;面向对象的概念较为复杂&#xff0c;知识点也很细碎&#xff0c;本文整理了面向对象的基本概念和方法&#xff0c;供大家参考。为了便于读者理解…...

数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图、标注、视频、控件、定位、检索)

百度地图开发系列目录 数据可视化大屏应急管理综合指挥调度系统完整案例详解&#xff08;PHP-API、Echarts、百度地图&#xff09;数据可视化大屏百度地图API开发&#xff1a;停车场分布标注和检索静态版百度地图高级开发&#xff1a;map.getDistance计算多点之间的距离并输入…...

1.面向对象和类的关系?2.什么是Promise、3.Promise和async、await的关系

面向对象:面向对象是一种编程思想&#xff08;oop&#xff09;。(Js里面所有的东西都可以看做对象&#xff0c;Js它是基于原型的面向对象语言&#xff0c;采用原型的方式来构造对象)很多个具有相同属性和行为的对象就可以抽象为类&#xff0c;对象是类的一个实例。JavaScript在…...

【程序化天空盒】过程记录01:日月 天空渐变 大气散射

1 日月 SunAndMoon 昼夜的话肯定少不了太阳和月亮&#xff0c;太阳和月亮实现的道理是一样的&#xff0c;只不过是月亮比太阳多了一个需要控制月牙程度&#xff08;or添加贴图&#xff09;的细节~ 1.1 Sun 太阳的话很简单&#xff0c;直接在shader里实现一个太阳跟随平行光旋…...

无线通信中的轨道角动量

目录 一. 前言 二. 如何传输 三. 如何产生 3.1 螺旋结构器件 &#xff08;1&#xff09;螺旋相位板 &#xff08;2&#xff09;螺旋抛物面天线 3.2 超表面 3.3 天线阵列 3.3.1 相控阵 3.3.2 时控阵 四. 如何识别 一. 前言 轨道角动量&#xff1a;Orbital Angular M…...

以后更新功能,再也不用App发版了!智能小程序将为开发者最大化减负

在 IoT 时代&#xff0c;越来越多的企业意识到打造自有 App 对于品牌的重要性。作为智能设备不可或缺的控制终端&#xff0c;App 具备连接用户、完善服务、精细化运营用户的独特优势&#xff0c;可帮助企业大大提升品牌竞争力。 为了帮助品牌企业打造更具个性化、差异化的智能…...

C++之类模板全特化和偏特化

类模板类模板是通用类的描述&#xff0c;使用任意类型&#xff08;泛型&#xff09;来描述类的定义。使用类模板的时候&#xff0c;指定具体的数据类型&#xff0c;让编译器生成该类型的类定义。注意&#xff1a;函数模板中可以不指定具体数据类型&#xff0c;让编译器自动推到…...

Python 手写数字识别 MNIST数据集下载失败

目录 一、MNIST数据集下载失败 1 失败的解决办法&#xff08;经验教训&#xff09;&#xff1a; 2 亲测有效的解决方法&#xff1a; 一、MNIST数据集下载失败 场景复现&#xff1a;想要pytorchMINIST数据集来实现手写数字识别&#xff0c;首先就是进行MNIST数据集的下载&am…...

华为机试题:HJ61 放苹果(python)

文章目录博主精品专栏导航知识点详解1、input()&#xff1a;获取控制台&#xff08;任意形式&#xff09;的输入。输出均为字符串类型。1.1、input() 与 list(input()) 的区别、及其相互转换方法2、print() &#xff1a;打印输出。3、整型int() &#xff1a;将指定进制&#xf…...

【论文速递】ICCV2021 - 基于超相关压缩实现实时高精度的小样本语义分割

【论文速递】ICCV2021 - 基于超相关压缩的小样本语义分割 【论文原文】&#xff1a;Hypercorrelation Squeeze for Few-Shot Segmentation 【作者信息】&#xff1a;Juhong Min Dahyun Kang Minsu Cho 获取地址&#xff1a;https://openaccess.thecvf.com/content/ICCV2021/…...

单例模式(Singleton Pattern)

目录 1.什么是单例模式&#xff1a; 2.单例模式存在的原因&#xff1a; 3.单例模式的优缺点&#xff1a; 4.创建方式&#xff1a; 1. 单线程单例模式立即创建&#xff08;饿汉式&#xff09;&#xff1a; 2. 单线程单例模式延迟创建&#xff08;懒汉式&#xff09;&#xf…...

docker file和compose

文章目录1.dockerfile&#xff08;单机脚本&#xff09;1.概念2.原理3.dockerfile核心四步4.命令2.docker compose1.概念2.注意事项3.常用字段4.常用命令1.dockerfile&#xff08;单机脚本&#xff09; 1.概念 通过脚本&#xff0c;生成一个镜像&#xff0c;并运行对应的容器…...

如何解决thinkphp验证码不能显示问题?

thinkPHP做验证码这一块,可以使用自带的验证码扩展,具体步骤如下: 一、安装扩展 composer require topthink/think-captcha 二、模版中使用 将原来静态页面的验证码图片替换为{:captcha_img()},这个会自动生成验证码图片。 <div>{:captcha_img()}</div> 或者 &…...

Vue极简使用

Vue安装Vue模板语法安装Vue 安装nodejs 这里我安装的是14.5.4版本 https://nodejs.org/download/release/v14.15.4/解压后配置一下环境变量就行 安装cnpm镜像 (这个安装的版本可能过高&#xff0c;后面安装Vue可能出问题) npm install -g cnpm --registryhttps://registry…...

【Nacos】Nacos配置中心服务端源码分析

上文说了Nacos配置中心客户端的源码流程&#xff0c;这篇介绍下Nacos配置中心服务端的源码。 服务端的启动 先来看服务启动时干了啥&#xff1f; init()方法上面有PostConstruct&#xff0c;该方法会在ExternalDumpService实例化后执行。 com.alibaba.nacos.config.server.s…...

第十五章 栅格数据重分类、栅格计算器、插值分析

文章目录第十五章 栅格数据分析第一章 栅格数据重分类第一节 栅格数据重分类第二节 栅格重分类的使用第三节 重分类的使用中的空值使用第四节 重分类的案例&#xff1a;分类统计面积第五节 坡度矢量分级图生成第二章 栅格计算器第一节 栅格计算器介绍第二节 栅格计算器使用第三…...

CS5260测试版|CS5260demoboard|typec转VGA参考PCB原理图

CS5260测试版|CS5260demoboard|typec转VGA参考PCB原理图 CS5260是一款高度集成的TYPEC转VGA转换方案芯片。 CS5260输出端接口:外接高清VGA设备如:显示器投影机电视带高清的设备&#xff0c;广泛应用于 笔记本Macbook Air 12寸USB3.1输出端对外接高清VGA设备如:显示器投影机电视…...

二极管限幅与钳位电路设计原理与应用

基于二极管的限幅与钳位电路设计精解1. 二极管基础特性与工程应用1.1 单向导电特性分析二极管作为半导体器件的基础元件&#xff0c;其核心特性是单向导电性。当正向偏置电压超过导通阈值&#xff08;硅管约0.7V&#xff09;时呈现低阻态&#xff0c;反向偏置时则保持高阻态。这…...

Pixel Dream Workshop生成图像的自动化软件测试方案

Pixel Dream Workshop生成图像的自动化软件测试方案 1. 当AI艺术遇上软件测试 最近在帮一个电商客户部署Pixel Dream Workshop时&#xff0c;遇到了一个有趣的问题&#xff1a;他们需要批量生成商品展示图&#xff0c;但发现AI生成的质量时好时坏。有时候图片完美符合要求&am…...

Pixel Fashion Atelier实战教程:从零构建像素时装生成API服务

Pixel Fashion Atelier实战教程&#xff1a;从零构建像素时装生成API服务 1. 项目介绍与核心价值 Pixel Fashion Atelier&#xff08;像素时装锻造坊&#xff09;是一款专为时尚设计师和像素艺术爱好者打造的AI图像生成工具。它基于Stable Diffusion和Anything-v5模型&#x…...

游戏玩家如何选?网易UU/ToDesk远程控制延迟实测(含手机投屏技巧)

游戏玩家专属远程控制工具深度评测&#xff1a;延迟、画质与投屏技巧全解析 作为一名资深游戏玩家&#xff0c;你是否遇到过这样的场景&#xff1a;出差在外想用手机继续刷副本&#xff0c;却苦于找不到合适的远程控制方案&#xff1b;或是想在平板上玩PC独占的3A大作&#xff…...

如何快速掌握终端数字雨效果:完整跨平台配置指南

如何快速掌握终端数字雨效果&#xff1a;完整跨平台配置指南 【免费下载链接】cmatrix Terminal based "The Matrix" like implementation 项目地址: https://gitcode.com/gh_mirrors/cm/cmatrix 想在终端中重现《黑客帝国》电影里的经典数字雨场景吗&#xf…...

Phi-3-Mini-128K企业级应用:基于MCP协议构建安全可控的AI工具链

Phi-3-Mini-128K企业级应用&#xff1a;基于MCP协议构建安全可控的AI工具链 最近和几个在企业里做技术管理的朋友聊天&#xff0c;大家不约而同地提到了同一个烦恼&#xff1a;看着外面各种AI模型能力越来越强&#xff0c;心里痒痒的&#xff0c;真想引入到自己的业务流程里&a…...

GTE模型与Visual Studio智能编程插件的集成

GTE模型与Visual Studio智能编程插件的集成 1. 引言 作为一名每天要写大量代码的程序员&#xff0c;我经常遇到这样的情况&#xff1a;突然想不起来某个API的具体用法&#xff0c;或者需要查找某个功能的实现示例。传统的做法是打开浏览器&#xff0c;在各种文档和论坛中搜索…...

Windows右键菜单终极管理指南:ContextMenuManager完全掌控你的系统交互体验

Windows右键菜单终极管理指南&#xff1a;ContextMenuManager完全掌控你的系统交互体验 【免费下载链接】ContextMenuManager &#x1f5b1;️ 纯粹的Windows右键菜单管理程序 项目地址: https://gitcode.com/gh_mirrors/co/ContextMenuManager Windows右键菜单管理一直…...

人体关键点检测实战:如何用OKS和AP评估模型性能(附Python代码示例)

人体关键点检测实战&#xff1a;OKS与AP指标深度解析与Python实现 在计算机视觉领域&#xff0c;人体姿态估计一直是热门研究方向&#xff0c;而准确评估模型性能则是项目落地的关键环节。不同于常规的目标检测任务&#xff0c;人体关键点检测需要更精细的评估体系——这正是OK…...

4大场景解决散热难题:开源散热管理工具全攻略

4大场景解决散热难题&#xff1a;开源散热管理工具全攻略 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Trending/fa/FanCont…...