检查图元是否在视口中
是指在前端开发中，判断一个元素是否在用户的可视区域内。这在很多场景下都是非常有用的，比如实现懒加载、动画触发、数据统计等。
为了检查图元是否在视口中，可以使用以下方法：
- 获取视口的大小和位置：
- 可以使用
window.innerWidth和window.innerHeight获取视口的宽度和高度。 - 可以使用
window.pageXOffset和window.pageYOffset获取视口相对于文档的水平和垂直偏移量。
- 可以使用
- 获取图元的位置和大小：
- 可以使用
element.getBoundingClientRect()方法获取元素相对于视口的位置和大小信息。
- 可以使用
- 判断图元是否在视口中：
- 可以通过比较图元的位置和大小与视口的位置和大小来判断是否在视口中。
- 如果图元的左边界小于视口的右边界，并且图元的右边界大于视口的左边界，并且图元的上边界小于视口的底边界，并且图元的底边界大于视口的上边界，则可以判断图元在视口中。
在实际开发中，可以结合滚动事件、窗口大小改变事件等来实时检查图元是否在视口中，并根据需要触发相应的操作。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云前端部署服务：https://cloud.tencent.com/product/scf
- 腾讯云云原生应用引擎：https://cloud.tencent.com/product/tke
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发：https://cloud.tencent.com/product/mobiledk
- 腾讯云数据库：https://cloud.tencent.com/product/cdb
- 腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
- 腾讯云视频处理服务：https://cloud.tencent.com/product/vod
- 腾讯云音视频通信（TRTC）：https://cloud.tencent.com/product/trtc
相关·内容
1回答
我有这段代码，它可以很好地理解一个元素是否在视区内。当控制台在视区中时，我想写入控制台一次，当它不在视区中时，我想写入控制台一次(而不是像现在这样连续写入)。
浏览 12提问于2020-10-12得票数 0
2回答
和我的导航，当我在相应的部分时，我试图添加一个活动的类，显示它是活动的。 代码有一个buggy的倾向，在nav-gallery中，我有一个砖石画廊，和光滑的滑块，我不确定这是否会影响它。但是，在导航中，活跃的类倾向于停留在图库上。每个部分的高度至少为100vh。 根据塞德里克的建议，我尝试了intersection observer API。但它也有同样的问题，至少在我的实现中，它是错误的，画廊不知何故在不在视口中时也是活动的。
浏览 13提问于2020-04-24得票数 0
回答已采纳
1回答
如何与Puppeteer一起检查HTML元素在视区(可见区域)内是否可见？例如，如果我必须滚动才能看到一个按钮，那么它是不可见的。page.waitForSelector('#element', { visible: true })
page.waitForSelector函数不是我要找的，因为它只检查元素是否在DOM中，并且没有被是否有任何方法可以检查图元在视
浏览 3提问于2018-02-07得票数 4
2回答
在这样做的时候，我发现了一个bug，如果用户按住滚动单击并将鼠标拖向底部，在某些情况下，元素将不再加载，直到页脚离开视图，然后再回到视图中。下面是我到目前为止用来在页脚位于视口中时加载元素的函数：$scope.
浏览 1提问于2016-03-19得票数 0
我在通过jQuery为高度变化的元素获取元素的高度时遇到了一个问题。因此，我尝试了突变，但这将应用一个线程，停止一切。
浏览 1提问于2016-03-23得票数 0
也就是说，当自动完成在页面的顶部时，菜单会向下移动，如果在页面的底部，菜单会向上移动(即使我们有一些垂直滚动条)。
谢谢。
浏览 0提问于2012-03-07得票数 15
回答已采纳
1回答
每次在视口中设置图元动画
、、、
我在我的WordPress站点上的联系人表单上制作了动画。当我滚动页面到联系人表单时，会触发动画(弹跳)...但现在我需要一些修改:我需要动画来重复每次滚动到联系人表单的时候。有人能帮上忙吗
浏览 5提问于2015-03-25得票数 2
1回答
我有滚动机制工作，但我希望div动画(改变大小或颜色等)当它们链接到的图元在视口中可见时。做这件事最好的方法是什么？
浏览 1提问于2014-07-31得票数 0
1回答
不在视口中时删除图元
、、、、
当一个元素在视口中时，我想要在它上触发动画(而不仅仅是变换)。我读到你可以这样做，如果你可以创建元素时，它在视口中，并删除它时，它不在视口中。 当元素不在视口中时，我遇到了删除元素的挑战。此代码用于在元素位于视口中时为其添加和移除类 var scroll = window.requestAnimationFrame ||
// IE F
浏览 18提问于2020-08-09得票数 0
回答已采纳
检查视口中是否有任何标记的最有效方法是什么？
完美的解决方案不需要逐个检查所有标记，如果它包含在视口中。
浏览 1提问于2010-06-01得票数 4
回答已采纳
1回答
库有一个scrollToElement方法，如果元素不在视口中，它可以滚动到元素。此外，此方法还有一个stickToTop参数，该参数尽可能少地滚动以显示元素(而不是像scrollTop那样位于视口顶部)。
有没有人知道这个功能的独立插件？
浏览 8提问于2016-01-15得票数 0
2回答
我这样检查:在此处输入代码var g.LatLng= new g.LatLng(parseFloat(lat)，parseFloat(lng))；var bound= map.getBounds()；if(bounds.contains( point )) {点在视口中}
但是当我改变缩放级别时，在视口的坐标之前，“不可见”点不会被检测到“可见”，我的意思是在视口中。
浏览 2提问于2012-04-07得票数 1
回答已采纳
();现在我遇到了三件奇怪的事情：
在将视图呈现为元文件(CMetaFileDC)时，的视图内容将倒置在元文件中。不同之处似乎是SetViewportExtEx()设置了一个负视口高度，尽管我传递的值肯定是正的--而且我需要负视口高度才能使图元文件正确。另一方面，使用作为缺省值的在打印预览中不显示任何。Why SetViewportExtEx(
浏览 0提问于2012-03-16得票数 1
1回答
获取中的所有元素
、、
我想知道(在javascript或jquery中，但没有任何插件)是否有可能在不遍历每个元素的情况下将所有元素(例如表行tr)都放在当前的视口中？我发现了很多示例，如何检查指定的元素是否在当前视口中，但我需要的是函数返回当前视口中所有元素的列表。
浏览 6提问于2014-06-27得票数 6
回答已采纳
它告诉我们视口中是否存在点，但我无法知道如何在视口中找到多个国家/州，.contains(point)或containsLocation()检查一个点。那么我要检查成百上千的点吗？不是的。
浏览 2提问于2016-03-08得票数 0
回答已采纳
2回答
我的目的是仅显示地图视口(当前显示的地图区域)内具有坐标的要素。我通过执行以下操作来获得视口的范围： var mapExtent = this.map.getView().calculateExtent(this.map.getSize());
mapExtent= ol.proj.transformExtent(mapExtent, 'EPSG:3857', 'EPSG:4326'); 然后，在我读取一个商店的元素的循环中， var point = ol.proj.fromLonLatnew ol.
浏览 17提问于2020-07-14得票数 1
回答已采纳
我正在尝试检查元素是否在视口中出现过一次，如果看到，则什么也不做，如果没有，则继续执行该函数。
.isInViewport() -检查元素是否在视口中，返回true或false。如何检查是否只看到了一次视口？
浏览 9提问于2020-05-24得票数 0
回答已采纳
我有一个类似数组的节点对象(它是一个carousel)，它们的顺序是在每次页面刷新时随机生成的，playwright发现所有元素都是可见的，但其中一些元素在视区之外(基于收到的错误)。我需要确保，当尝试单击该元素时，该元素在视口内，否则我会收到一个错误，指出该元素在视口外。
如何确定类似数组的对象的随机拾取的节点元素是否实际位于视口中？
浏览 26提问于2021-03-04得票数 0
我想验证元素是否在视口中不可见，然后滚动到该元素，进行单击，如果已经在视口中可见，则直接单击我正在使用的元素WebUI.click(TestObject obj)WebUI.click(TestObject obj)如果元素可见并且在视</e
浏览 0提问于2018-11-14得票数 0
在给你一点建议之后。我正在做我的公文包，我正在使用css过渡来动画元素与一些联系信息，这成为活动时，用户滚动。超文本标记语言<li><figure class="top-bar-avatar"><img src="img/nick_avatar.png" alt="Top Bar Avatar Image Of Nick
浏览 15提问于2017-02-15得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
