[前端]判定元素是否在可视范围的方法总结

最新推荐文章于 2024-08-20 10:00:03 发布
置顶 最新推荐文章于 2024-08-20 10:00:03 发布
阅读量5k 收藏 2
点赞数
分类专栏： html js Jquery 文章标签： 前端 Jquery javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jsh0123/article/details/51083644
版权
本文总结了前端开发中判断元素是否在可视范围内的多种方法，包括JavaScript原生方法scrollIntoViewIfNeeded，以及利用jQuery获取元素位置和窗口可视范围的技巧。还探讨了document.body.scrollWidth、document.body.scrollHeight等属性，以及jQuery的$(window).width()、$(window).height()用于计算页面和窗口尺寸的方法。此外，还提到了offsetHeight、offsetTop等属性在确定元素相对位置时的作用。
摘要由CSDN通过智能技术生成

1

最基本的方法，js 方式document.getElementById.scrollIntoViewIfNeeded

如果是true 则调用基本的document.getElementById.scrollIntoViewIfNeeded();

2

通过运算基本的加减法

元素的位置jquery方法

$().offset().top

$().offset().left

js 方法比较复杂建议直接用JQuery

窗口可视范围以及窗口的范围(原生js)

//这两个很有用，也是我经常用到的

最低0.47元/天 解锁文章
勤奋的重剑
关注
专栏目录
29.JavaScript如何判断一个元素是否在可视区域中？
kleinBlue.的博客
10-21 4632
一、用途 可视区域即我们浏览网页的设备肉眼可见的区域，如下图 在日常开发中，我们经常需要判断目标元素是否在视窗之内或者和视窗的距离小于一个值（例如 100 px），从而实现一些常用的功能，例如： 图片的懒加载 列表的无限滚动 计算广告元素的曝光情况 可点击链接的预加载 二、实现方式 判断一个元素是否在可视区域，我们常用的有三种办法： offsetTop、scrollTop getBoundingClientRect Inters..
前端必知：如何判断元素出现在视口内
清颖的博客
01-30 3089
要检测一个元素是否可见或者两个元素是否相交的需求场景有这些： - 图片懒加载——当图片滚动到可见时才进行加载 - 内容无限滚动——也就是用户滚动到接近内容底部时直接加载更多，而无需用户操作翻页，给用户一种网页可以无限滚动的错觉 - 检测广告的曝光情况——为了计算广告收益，需要知道广告元素的曝光情况 - 在用户看见某个区域时执行任务或播放动画
JS判断元素是否在可视区域中
yiguoxiaohai的博客
08-20 676
JS判断元素是否在可视区域中
如何判断一个元素是否在可视区域内
weixin_42948707的博客
08-12 1万+
在制作移动端的页面时，当页面上有视频并且正在播放时，如何让视频在消失的时候停止播放，之后便针对这个问题进行解决。 首先，我们先了解一下几个概念，先假设该元素为$(“#main”) 1.元素距离页面顶部的距离 var mainOffsetTop = $(“#main”).offset().top; 2.元素的高度 var mainHeight = $(“#main”).heig...
怎么检测页面那些元素超出设备宽度
欢迎来到小迪的CSDN博客！
01-17 1811
写页面的时候如果页面元素的宽度超出设备宽度就会出现横向滚动条，这对移动端的页面影响还是很大的，那么怎么去检测到底是那些元素的宽度超出了设备的宽度了呢？先看看是哪些原因导致这种现象： 宽度使用了width:100%，但是又有padding或者border，由于浏览器默认的盒模型是content-box，也就是说width:100%是内容的100%，这样再加上padding和border才是元素实际的宽
HTML 检测元素能显示出来的比例
BeStronger
01-08 612
// 检测元素能显示出来的比例 const visibleProportion = (element: HTMLElement) => { //获取获取某个元素相对于视窗的位置集合 const rect = element.getBoundingClientRect(); //获取要素高度 const clientHeight = document.doc
判断元素内容在浏览器可视范围内
qq_44726744的博客
09-18 68
【代码】判断元素内容在浏览器可视范围内。
Judgement_labview结果判定汇总vi_
09-29
总结来说，这个LabVIEW VI提供了一种高效的方法来处理和显示多个数据通道的判断结果，对于测试和监测应用非常有用。通过深入研究和理解这个VI，你可以学习到LabVIEW中的数据处理、条件判断和用户界面设计等核心概念...
web前端面试题（必背面试题）
热门推荐
Z_Gleng的博客
05-25 3万+
自己总结的常见的面试题 总字数13万+ 大概有200+左右道题 会不定期更新
高德智慧交通地图空间可视化SDK设计与实现
高德技术
02-01 2万+
一、背景地图空间可视化作为高德智慧交通前端业务中最重要的功能之一，承担着城市交通大脑、全境智能大屏等业务中大量的地图渲染需求。作为向用户展示交通数据的窗口，我们需要展现省、市、区、商圈、...
面试官问：如何判断一个元素是否在可视区域？
p1967914901的博客
07-27 2082
可以理解为将元素看出一个矩形，该对象包含了该矩形的位置、大小信息，可以获得页面中元素的左，上，右和下分别相对浏览器视窗的位置。很多时候，目标元素不仅会随着窗口滚动，还会在容器里面滚动（比如在iframe窗口里滚动）。有时，我们希望某些静态资源（比如图片），只有用户向下滚动，它们进入视口时才加载，这样可以节省带宽，提高网页性能。这样设置以后，不管是窗口滚动或者容器内滚动，只要目标元素可见性变化，都会触发观察器。返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的。...
如何判断一个元素是否在可视区域中？
TongJ_的博客
02-19 1982
一、用途 可视区域即我们浏览网页的设备肉眼可见的区域，如下图 在日常开发中，我们经常需要判断目标元素是否在视窗之内或者和视窗的距离小于一个值（例如 100 px），从而实现一些常用的功能，例如： 图片的懒加载列表的无限滚动计算广告元素的曝光情况可点击链接的预加载 二、实现方式 判断一个元素是否在可视区域，我们常用的有三种办法： offsetTop、scrollTop getBoundingClientRect Intersection Observer 方法一 offsetTop、scrollT
【前端知识之JS】如何判断一个元素是否在可视区域中
weixin_44337386的博客
06-09 5174
本系列主要整理前端面试中需要掌握的知识点。本节介绍如何判断一个元素是否在可是区域中
scrollIntoView 和 scrollIntoViewIfNeeded 详解
态度决定一切
11-19 4173
文章目录前言scrollIntoView 支持两种参数：scrollIntoViewIfNeeded 仅支持一种参数：两者区别案例源码参考 前言 scrollIntoViewIfNeeded 是 scrollIntoView 的变体，scrollIntoViewIfNeeded 不是标准的写法。 scrollIntoView 支持两种参数： 1.Object: block: 可选 | start(默认值), center, end, nearest, 定义垂直方向的对齐. inline: 可选 | sta
js如何判断一个元素在可视区域内
chenxiaoyi0207的博客
11-08 9863
下方通用示例html的dom和公共js代码： <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&g
判断html元素超出显示,js 判断元素（例如div）里的数据显示不全（数据长度大于元素长度）...
weixin_35715402的博客
06-17 2928
//判断div里元素是否超出长度，true 超出，false 没有dom=document.getElementById(‘id‘);function isEllipsis(dom) {var checkDom = dom.cloneNode(), parent, flag;checkDom.style.width = dom.offsetWidth + ‘px‘;checkDom.style.h...
JQuery判断内容是否超出（overflow）
JulyNight的博客
05-30 1272
const dom = $('.box')[0]; // 特别注意：类选择拿到的是数组 if(dom.scrollWidth > dom.offsetWidth){ console.log('超出') }else{ console.log('未超出') }
如何判定一个元素是否在python字典里
最新发布
09-07
在Python中，判断一个元素是否在字典中可以通过多种方法实现。字典是由键值对组成的映射类型，因此通常我们需要检查的是键是否存在于字典中，而不是值。以下是一些常用的方法： 1. 使用`in`关键字：这是最直接和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值