如何检测一个元素何时出现在另一个元素的视图中
要检测一个元素何时出现在另一个元素的视图中，可以使用以下方法：
- 监听事件：可以通过监听元素的滚动、鼠标移动、窗口大小改变等事件来判断元素是否出现在视图中。当这些事件触发时，可以通过计算元素的位置和视图的大小来判断元素是否在视图中。
- Intersection Observer API：Intersection Observer API 是浏览器提供的一种用于监测元素是否进入或离开视图的方法。通过创建一个 Intersection Observer 对象，并指定要观察的元素和回调函数，当元素进入或离开视图时，回调函数会被触发。
- getBoundingClientRect() 方法：getBoundingClientRect() 方法可以获取元素相对于视窗的位置信息。通过获取目标元素和视窗的位置信息，可以判断元素是否在视图中。
- jQuery 的 is() 方法：如果你使用 jQuery，可以使用 is() 方法来判断元素是否在视图中。例如，可以使用
$(element).is(':in-viewport')来判断元素是否在视图中。
这些方法都可以根据具体的需求选择使用。根据不同的场景和要求，可以选择合适的方法来检测元素是否出现在另一个元素的视图中。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云数据库 MySQL 版（CMYSQL）：https://cloud.tencent.com/product/cdb_mysql
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile
- 区块链（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关·内容
1回答
这可能是一个模糊的问题，所以我提前道歉。我只是想知道是否有任何方法(Javascript、服务器端或其他)可以以某种方式检测到浏览器窗口的任何部分在屏幕上不可见。例如，也许我几乎最大化了我的浏览器窗口，然后抓住它并将其从screen...can上拖走，从而触发任何Javascript / ajax事件，以找出有多少视口是“不可见的”，从而使我能够向文档添加一个类或一些可以调整样式的东西，或者是无法与web应用程序通信
浏览 1提问于2013-03-10得票数 2
我希望能够根据我的选择在元素(如<div> )到达视口的任意点时添加一个类。var isInViewport = function (elem) {
var bounding = elem.getBoundingClientRectbou
浏览 0提问于2019-06-14得票数 0
我考虑使用来检测某些元素是否出现在当前的视图中。if(verge.inViewport(target)) {
target.show(
浏览 5提问于2016-06-30得票数 0
回答已采纳
我一直在研究IntersectionObserver，通过检查en元素是否在视区内来检测en元素何时对用户可见。然而，如果另一个元素覆盖了" target“元素，似乎只有当我们知道要具体观察哪些元素时，我们才能检测到这一点，因为观察者总是拿一个目标和一个根来进行比较：
function createObserverIntersectionObserver(callback
浏览 6提问于2018-07-26得票数 0
我在一个网站上使用Locomotive Scroll。我尝试实现的内容如下:当一个带有id #mysection的部分出现在视口中时，我希望出现一个图标，然后在该部分离开视口时消失。我尝试过在文档和网络上搜索实现这一点的方法，但我不知道如何实现它。现在，我已经看到您可以通过使用以下命令在文档中启动事件： <!，当元素进入视口时，箭头显示得很好。但是当我向下滚动然后向上滚动时，
浏览 23提问于2020-04-04得票数 2
回答已采纳
我使用的是react-无限滚动列表，并且我实现了一个向上/向下箭头处理程序： if(e.keyCode === 40){ e.preventDefault() }}这只适用于选择列表中的<
浏览 14提问于2017-08-15得票数 2
回答已采纳
我见过演示如何做到这一点的教程，但我所见过的都是使用“窗口”或从页面底部查看元素的示例。我有一个固定高度的模型，可以滚动： const ItemMarkup = forwardRef(({user}, ref) => <li ref={ref}>...current.removeEventListener("scroll", onScroll);
}, [ref, onScreen, scrolling]) 这似乎都是错的<
浏览 14提问于2021-10-05得票数 1
回答已采纳
当某个元素在视图中显示一定数量(0-100%)时，就会触发IntersectionObserver。这意味着，当元素为时，它不再触发视口中的100%，因为阈值没有变化。我有一个高度为200vh的元素，当我在IntersectionObserver元素上滚动时，希望触发它。因此，元素总是100%在视口内。
有什么方法可以在滚动元素时触发观察者吗？我不能使用滚动事件，因为我使用
浏览 0提问于2019-09-15得票数 19
我正在使用Flutter 2，并有一个ListView构建器，其中的小部件是像你在附件截图中看到的那样构建的。 在顶部，我有一个水平滚动菜单，其中列出了所有类别。我的目标是，我想知道垂直滚动目录中的哪个项目有哪个顶值(位置)，这样我就可以用ScrollController估计哪个目录当前是可见的(并且可以在顶部的菜单中突出显示-就像这里的“类别1”)。希望你能明白我的意思。 我想渲
浏览 18提问于2021-07-26得票数 1
回答已采纳
我已经编写了一个脚本，该脚本检测页面的HTML中是否存在某个字符串，然后用包含类的跨度包装该字符串。此字符串可以在同一页中多次出现。然后，我检测浏览器中何时可以看到这些元素，然后使用jquery的show()方法触发一个事件，向页面显示一个警告。
其思想是，当元素离开视口时，使用jquery的hide()方法隐藏警告。当元素只有一个实例时，我让它
浏览 0提问于2018-02-07得票数 2
回答已采纳
如果您使用诸如bootstrap之类的框架，您就会知道元素类根据操作或视口大小而变化……
在Angular中是否有一个事件允许我们检测元素的类何时发生变化？例如，有一个引导导航栏，每次它的类列表中有show类时，我想要console.log("show")，而每次它的类列表中没有show类时，我想要console.log("hide")。换句话说，我想订阅<e
浏览 1提问于2019-07-08得票数 0
我希望检测某个元素何时在视区中，并向该元素中添加一个类。我的数学原理是:取元素在页面上的位置，减去窗口的高度，这将导致页面折叠与元素本身之间的距离。如果该距离大于或等于滚动量，则添加类。
浏览 6提问于2017-06-12得票数 0
回答已采纳
例如，我有一个带有文本区域的HTML表单元素，以及两个作为子元素的按钮。我如何检测焦点何时从这三个元素中的一个转移到这三个元素中的另一个元素。换句话说，我如何检测焦点何时离开窗体，这样我就可以自动关闭它？我想我可以使用窗体上的focusout事件来确定foc
浏览 4提问于2011-08-10得票数 2
1回答
我想在我的网站中使用，但方式不同。如果它能代表我在几个领域的技能，那就太好了。我的主要想法是使用循环进度条来显示加载指定百分比的动画，但是jquery .onscroll ()事件确实是非优化的，并且使页面变得非常滞后……有没有可能优化它的方法？或者甚至有其他更好的方法吗？
浏览 9提问于2017-07-02得票数 0
1回答
我想我的文字出现一次im 100px以上它，我想它是隐藏在那之前。我想让它在100px的时候从左边滑进去。我以前从来没有做过这样的事情，这对我来说是新的。我如何在React中做到这一点？我在谷歌上搜索了无数的答案，但似乎没有一个真正有帮助。 我尝试过使用this.test和this.test()，但都没有效果。
浏览 9提问于2019-06-14得票数 0
我想要一个平滑的css translate动画在.caption上，当div在视口中，并删除它时，div不在视口中。 我添加了一个动画，但不知何故，我没有得到我想要的东西。
浏览 14提问于2019-02-02得票数 0
1回答
获取分页的每个元素
、、、
我正在创建一个电子商务网站，在目录页面上有无限滚动。我想知道每个产品在屏幕上显示给用户多少次(印象)。问题是如何获得用户每次向下滚动到新页面时呈现的新12个元素。然后将他们的ids传递给服务器并存储他们的印象。有没有办法访问新元素？我在上查了一下，什么也没看到。下面是我在模板中呈现products数组的代码： @foreach($products as $produc
浏览 0提问于2016-02-29得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
