强制IntersectionObserver更新
是指通过编程的方式触发IntersectionObserver对象进行元素可见性的检测和更新。
IntersectionObserver是一种现代的浏览器API，用于监测元素与视口（或其他容器）之间的交叉状态。它可以用来判断元素是否进入或离开视口，从而实现懒加载、无限滚动、可视化统计等功能。
在某些情况下，我们可能需要手动强制IntersectionObserver对象进行更新，而不是等待浏览器自动触发。这种情况通常发生在以下几种情况下：
- 动态添加或移除元素：当我们通过JavaScript动态地添加或移除元素时，需要手动更新IntersectionObserver对象，以确保新添加的元素或移除的元素的可见性状态被正确地检测和更新。
- 元素位置或尺寸发生变化：当元素的位置或尺寸发生变化时，例如通过CSS动画或JavaScript操作改变元素的位置或尺寸，需要手动更新IntersectionObserver对象，以确保元素的可见性状态得到正确的更新。
- 需要立即获取元素的可见性状态：有时候我们需要立即获取元素的可见性状态，而不是等待浏览器自动触发。这可以通过调用IntersectionObserver对象的
observe()方法来实现。
在腾讯云的产品中，可以使用云函数（SCF）来实现强制IntersectionObserver更新的功能。云函数是一种无服务器计算服务，可以在云端运行自定义的代码逻辑。通过编写一个云函数，我们可以在需要的时候调用IntersectionObserver对象的observe()方法，从而实现强制更新。
腾讯云云函数产品介绍链接：https://cloud.tencent.com/product/scf
总结：强制IntersectionObserver更新是通过编程的方式触发IntersectionObserver对象进行元素可见性的检测和更新。在动态添加或移除元素、元素位置或尺寸发生变化、需要立即获取元素的可见性状态等情况下，我们可以使用云函数等方式来实现强制更新的功能。
相关·内容
目标：--我想为一组元素执行一个操作，这些元素在页面加载时相交，并单独处理所有其他元素(这些元素目前尚未相交)。
问题：每个观察者都有自己的回调，我无法同时获得其中一组回调的结果。
可能的解决方案：，如果最初可以询问交叉观察者是否元素是相交的。据我所知，没有这样的功能，所以每一个想法或帮助都会受到赞赏。
浏览 4提问于2020-08-21得票数 4
回答已采纳
我正在尝试测试一个组件，该组件包含一个包含react-intersection-observer的子组件，但我总是得到一个错误 我试图导入库，但仍然失败。这是初始测试 beforeEach(() => {
testContainer = document.createElement("div");
document.body.appendChild(testContainer);
subject = memoize(() =>
mount(<FilterNav {...props} />, {
浏览 89提问于2019-07-12得票数 10
回答已采纳
1回答
我正在尝试在Angular中设置IntersectionObserver，但是我不能让它工作。当我从服务器使用HttpClient向下滚动时，我想加载数据。我正在做这样的事情:在页面底部的HTML中，我有以下内容： <div #ob></div> 在.ts文件中，我使用ViewChild来获取元素并将其传递给IntersectionObserverService： @ViewChild('ob') ob: ElementRef;
constructor(
private inter: IntersectionObserverService)
浏览 12提问于2021-04-27得票数 2
回答已采纳
当观察到的元素具有position: absolute并且根不是视口时，IntersectionObserver似乎不起作用。 我是不是漏掉了什么？ (尝试删除position: absolute以查看预期结果。) let intersectionRoot = document.getElementById("intersectionRoot");
let observedElement = document.getElementById("observedElement");
let shifted = false; // Internal for th
浏览 23提问于2021-01-15得票数 1
回答已采纳
我正在尝试使用top从多个元素获取IntersectionObserver和bottom度量。然而，一旦我有了测量，我如何才能unobserve元素。
问题是，每个元素都是position: sticky，当滚动附加值被添加到array时，我只需要初始呈现的度量。
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
const measurement = {
top: entry.boundingClientRect.top,
浏览 3提问于2021-05-25得票数 2
回答已采纳
2回答
正在尝试生成工具提示组件。当工具提示从视口移开时，需要切换工作正常的工具提示位置。但是当工具提示远离视口时，useEffect会无限运行。找不到根本原因。 添加沙盒链接https://codesandbox.io/s/dbpkr
浏览 61提问于2020-12-29得票数 0
我正在尝试在iOS13上运行的cordova 8.0.0应用程序中使用IntersectionObserver。当我通过safari检查我的应用程序时，我看到一个初始化错误：
ReferenceError: Can't find variable: IntersectionObserver
这表明IntersectionObserver不可用，我应该使用polyfill。但!我读过很多文章，声称iOS safari 12+本身就支持IntersectionObserver。我假设，cordova将运行本地可用的WKWebView，所以它应该可以在没有polyfill的情况下工作，对吧？
浏览 2提问于2019-11-28得票数 5
当用户滚动到页面底部时，我使用IntersectionObserver加载数据。 @Output() onScroll = new EventEmitter();
@ViewChild('end') endOfList!: ElementRef<HTMLElement>;
observer!: IntersectionObserver;
constructor(private requests: ElementRef) { }
ngAfterViewInit() {
this.observer = new Intersection
浏览 13提问于2020-08-26得票数 0
1回答
我是curious...do的CSS滚动快照属性有一个API (事件)，可以通过JavaScript？ 我正在修补创建一个网站的想法，该网站使用滚动捕捉在100vh的“幻灯片”之间移动。在每个幻灯片完成“滚动捕捉”后，我想触发一个动画。 我相信有一些巧妙的方法可以检查每个“幻灯片”，看看它是否占用了100%的视窗，但这有点糟糕。最好是在scroll事件完成后再触发一个函数。 下面是一个超级简单的例子： $(document).ready(function() {
let slideNumber = $('.container > .slide').length;
浏览 13提问于2019-02-21得票数 9
我正在努力创建一个平滑的滚动页面的反应。假设这个页面被分成四个部分：
我们是谁
关于
成员
校友
因此，在滚动时，如果它位于id=members的“members”部分，则URL应该更新到:website.com/who--我们是#成员--这样他就可以复制这个链接，并且当您访问这个URL将您直接发送到该部分时。
浏览 2提问于2021-10-14得票数 2
我有一个IntersectionObserver来延迟加载图像等等，其中el是HTML，offset是一个数字。
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting === true) {
el.srcset = this.image;
observer.unobserve(el);
}
}, {threshold: [0], rootMargin: this.offset + 'px'});
observer.observe
浏览 7提问于2020-05-23得票数 1
我有一个简单的设置，使用intersectionObserver在元素相交时向元素添加一个类。 如果一次只有一个元素滚动到视图中，则工作得很好。 let lazyLoadSvg = document.getElementsByClassName('geometry-animation')
console.log(lazyLoadSvg)
for(let i = 0; i < lazyLoadSvg.length; i++){
const observer2 = new IntersectionObserver(entries => {
浏览 31提问于2021-08-27得票数 0
回答已采纳
我的应用程序中有一个(编写得相当糟糕) javascript组件，它处理无限滚动分页，我试图重写它以使用IntersectionObserver，正如描述的，但是我在测试它时遇到了问题。
是否有一种方法来驱动QUnit测试中观察者的行为，即用我的测试中描述的一些条目触发观察者回调？
我提出的一个可能的解决方案是在组件的原型中公开回调函数，并在我的测试中直接调用它，如下所示：
InfiniteScroll.prototype.observerCallback = function(entries) {
//handle the infinite scroll
}
InfiniteScr
浏览 10提问于2017-05-29得票数 50
回答已采纳
我正在做一个纯JavaScript无限卷轴。我有四个帖子清单。
当我到达容器的底部时，我试图加载更多的帖子(“原始”的克隆)。
class InfiniteScroll {
constructor() {
this.observer = null;
this.isLoading = false;
this.postsContainer = document.querySelector('#postsContainer');
this.postsArary = postsContainer.querySelectorAll('.po
浏览 3提问于2021-04-12得票数 2
回答已采纳
使用以下自定义的React与IntersectionObserver进行交互
import { useCallback, useRef, useState } from 'react';
type IntersectionObserverResult = [(node: Element | null) => void, IntersectionObserverEntry?];
function useIntersectionObserver(options: IntersectionObserverInit): IntersectionObserverResult {
浏览 3提问于2020-08-12得票数 0
1回答
我目前正在使用webpack，并且在我的应用程序初始化之前添加了这段代码。 delete window.IntersectionObserver;
if (!('IntersectionObserver' in window)) {
console.log(`Load observer`);
import('/node_modules/intersection-observer/intersection-observer.js');
console.log(`Loaded`);
}
console.log(`Start`); 我删除
浏览 18提问于2021-11-17得票数 0
1回答
我有这样的密码：
<h1 class="font" id="typed3" style="text-align: center; font-size: 400%; color: black;">About Us</h1>
<br>
<br>
<script>
var typed2 = new Typed('#typed3', {
strings: ['About Us'],
typeSpeed: 400,
浏览 18提问于2020-09-03得票数 0
回答已采纳
1回答
当表格单元格完全可见时，我正在更改它的背景色。为了完成这个任务，我使用了一个交叉点观察者。
所有代码都可以在代码沙箱中使用，并演示如何复制bug：
我使用useInView钩子作为交叉口观察者：
export const useInView = options => {
const ref = useRef();
const [isVisible, setIsVisible] = useState(false);
const [intersectionRatio, setIntersectionRatio] = useState(false);
useEffe
浏览 2提问于2019-11-26得票数 5
回答已采纳
是否有一种方法可以检测元素的getBoundingClientRect()矩形在没有实际计算getBoundingClientRect()的情况下发生了变化？像是“肮脏的旗帜”吗？天真地，我假设在浏览器的内部工作中肯定有这样一种机制，但是我还没有在DOM中找到公开的机制。也许有一种方法可以用MutationObservers来做到这一点？
我的应用程序是一个web组件，它将DOM元素转换为图形的节点，并将边缘绘制到全屏画布上。见。
现在，我正在为每个元素调用getBoundingClientRect()，每个动画帧只调用一次，即使没有任何变化。感觉很贵。我通常得到%15-%50 CPU的使用率
浏览 3提问于2016-10-25得票数 47
2回答
如果我们使用jest和typescript，其中使用了一个交集观察者，那么模拟交集观察者将变得很困难。到目前为止，我在： beforeEach(() => {
// IntersectionObserver isn't available in test environment
const mockIntersectionObserver = class {
observe() {
console.log(this);
}
unobserve() {
console.log(this);
}
disco
浏览 20提问于2020-08-31得票数 4
回答已采纳
我有一个使用交集观察者的组件，并希望在一个jest测试中测试该元素是否相交的效果。我已经成功地模拟了这个答案中的交集观察者：
现在，我想在特定元素上“伪造”isIntersecting触发器的回调。在测试中有可能模仿这个吗？
const observe = jest.fn();
const disconnect = jest.fn();
setupIntersectionObserverMock({ observe: observe, disconnect: disconnect });
const page = await newSpecPage({
components: [
浏览 1提问于2020-12-09得票数 4
1回答
我试着计算一下在这样的组件上使用了多少directives。但是它并没有像我预期的那样工作。 这是我的指令文件 import ahoy from "ahoy.js"
let count = 0
export default {
id: "bar",
definition: {
bind: (el, binding) => {
const handler = (entries, observer) => {
count++
console.log(count)
if (e
浏览 14提问于2021-04-19得票数 0
回答已采纳
1回答
我试着使用交集观察者在滚动中动画我的页面，但是浏览器总是说没有定义交集构造函数。拜托，我需要你帮忙解决这个问题。
let animate = document.querySelector(".slide");
let observer = new Intersection( (entries) => {
console.log(entries);
});
observer.observe(animate);
浏览 6提问于2022-10-14得票数 -1
回答已采纳
我完全被交叉口观察者的搞糊涂了。
我的目标是当一个元素的高度的一半已经越过视口的垂直中心时，向该元素添加一个类。
在我当前的项目中，我所做的任何事情似乎都不会影响“根相交矩形”，并且类总是立即添加的。我测试过最新的Chrome和Firefox。
下面是简化后的测试用例：
// https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
const options = {
root: null, // default, use viewport
rootMargin: '0p
浏览 1提问于2019-07-04得票数 5
回答已采纳
我不确定为什么，但是我做的一些事情导致我的intersectionObserver实例中的回调触发了2次，而实际上它只触发了1次。任何关于为什么会这样的见解都将不胜感激。
在这个组件中发生的其他事情中，我试图通过在useEffect()钩子中调用我的观察者实例上的insersectionObserver方法来设置观察者来观察一个被称为底边界的元素。这很好用，除了观察者触发我的回调两次。我已经尝试将观察者添加到dependancy数组中，并尝试将getEvents添加到dependancy数组中，但我只是无限循环，而不是双重触发。
import React, { useState, useEff
浏览 3提问于2020-05-23得票数 0
1回答
因此，随着谷歌最近收购spider.io，每个人都在谈论广告的可看性。
除了Spider.io的专利技术和comScore的专利几何技术...有没有其他方法可以在第三方iframe中使用javascript来检测广告的可看性？
谢谢!
浏览 5提问于2014-03-25得票数 3
1回答
基于滚动位置的增量CSS动画
、、、、
我使用下面的代码根据窗口滚动位置逐步播放暂停的CSS动画。
我现在遇到的问题是，一旦我开始滚动，所有暂停的动画都会同时触发。我希望每个动画只有在其父div进入视口时才开始。
你知道我该怎么做吗？提前谢谢。
window.addEventListener("scroll", () => {
document.body.style.setProperty("--scroll", window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
}, false);
.que
浏览 0提问于2020-11-12得票数 2
TL，DR：
我不关心目标容器有多少是可见的，我只想知道目标容器何时到达视区(窗口)顶部的特定偏移量。我应该坚持使用良好的旧滚动事件，还是可以使用交叉观察器来完成？
说来话长：
对于一个项目，我需要创建一个垂直滚动视差效果(就像在上看到的，当在大屏幕上观看时)。
视差动画需要检测目标容器何时到达距视口顶部的特定偏移。它需要知道滚动的方向。
我发现这个问题解释了是如何解决我的第二个问题的。
所以我的问题是:当我的目标容器到达视区顶部的特定偏移量时，我是否可以使用交叉点观察器来触发回调？
在伪代码中，我需要这样的代码：
var observer = new IntersectionObserver
浏览 1提问于2019-10-01得票数 3
1回答
我想检测<iframe>中的一个元素是否在主框架的客户端视图中。
我面临的问题是，元素总是在<iFrame>的视图中。但我无法检测主框架中的元素是否在视图中。
在这个例子中，想想看，元素(Div)位于Pixel 2500。如果元素在视图中，我希望从<iframe>外部检测
<html>
<body>
<div style="background-color: red;" width="100%">
Menu
</div>
<iframe src="https:
浏览 1提问于2021-02-22得票数 0
回答已采纳
基本上，我想用@input值标记dom元素，即'aos‘
<div aos>my</div>
然后，例如，每当这样的div在我的视口内时，就执行控制台日志。
如何才能做到这一点？我假设使用角的滚动调度程序，但是如何理解视口中存在这样的div？
浏览 2提问于2020-09-30得票数 7
回答已采纳
1回答
我用交集观测器来延迟加载图像。如何在不支持交叉观察者的浏览器中加载所有图像？
我的script=
const imob = new IntersectionObserver((entries, self) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
llo(entry.target);
self.unobserve(entry.target);
}
});
});
document.querySelectorAl
浏览 3提问于2022-01-15得票数 0
回答已采纳
我必须平稳地scrollIntoView一个特定的元素，然后做一些事情。
示例
element.scrollIntoView({behavior: 'smooth'}).then(() => {
// Do something here
})
--我知道这样做是不可能的，作为本机scrollIntoView不返回承诺。但是，我该如何实现这样的目标呢？
我用的是角7 BTW。因此，如果有任何指令可以帮助我做到这一点，那就太好了。
浏览 0提问于2019-04-23得票数 0
回答已采纳
当元素通过滚动进入或离开viewport时，下面的代码将触发状态更改
const dialog = useRef(),
[visible, set] = useState(false)
useEffect(() => {
const observer = new IntersectionObserver((e) => {
set(e[0].isIntersecting ? true : false)
}, {root: null, rootMargin: '0px', threshold: 0})
浏览 6提问于2021-12-23得票数 0
回答已采纳
我有很长的联系人名单。如果滚动列表，工具栏标题应显示工具栏标题下面的人的姓名。
CodePen示例：
我使用的是VueJS和Vuetify框架。Vuetify提供以下组件，但它基于位置-如何获取列表条目的名称？
卷轴：
滚动：
HTML：
<div id="app">
<v-app id="inspire">
<v-card
max-width="500"
class="mx-auto"
>
<v-toolbar
浏览 0提问于2019-09-13得票数 1
回答已采纳
1回答
我基本上是在尝试在我的网站上拥有与这里完全相同的路由行为：。请注意，向下滚动时，链接将变为。向后滚动，反之亦然。当重新加载页面时，您的位置将被保存。
我在我的路由器中添加了以下滚动行为：
scrollBehavior(to, from, savedPosition) {
if (to.hash) {
return { selector: to.hash }
} else if (savedPosition) {
return savedPosition;
} else {
return { x: 0, y: 0 }
浏览 29提问于2020-05-07得票数 9
1回答
我在我的网站上添加了一些效果。首先，我添加了翻译效果，效果很好。我有一个InsersectionObserver，它只在用户到达该部分时触发效果。然后，我添加了一个fadein动画，它也能工作，但由于某种原因，是在网站加载时触发的，而不是在我到达该部分时触发的。这意味着效果是“迷失”，人们不会看到它。
.vision-box-animation{
/* Animation Settings */
transform: translateY(+100px);
animation: fadeIn ease 2s;
}
@keyframes fadeIn {
0% { opacit
浏览 8提问于2022-11-03得票数 0
如何检查用户是否在浏览器中向下滚动(或交叉)到特定元素(基于id)，以便检查条件并在角7中动态分配类名？
浏览 1提问于2019-04-20得票数 2
回答已采纳
我已经在网站上安装了谷歌reCaptcha v2 (复选框类型)。但是，即使使用了“defer”属性(基于页面速度测试)，它也会显著降低移动端的页面加载速度。所以，我想把它的加载完全推迟到页面完全加载之后。
表单代码(安装reCaptcha的位置)如下所示：
<form id="sib-form" method="POST" action="https://.........." data-type="subscription">
<input class="input" t
浏览 19提问于2020-06-06得票数 4
是否有方法将内置的javascript方法存储在变量中，以便在某些浏览器中无法使用此方法时设置不同的行为？
我的具体案例是intersectionObserver，它在Safari或旧的MS浏览器中是不可用的。我有一些动画触发这一点，并希望关闭他们如果intersectionObserver是不可用的。
我想要做的基本上是：
var iO = intersectionObserver;
if ( !iO ) {
// set other defaults
}
我真的不想只为一个特性加载一个多填充或库？
非常感谢
艾米丽
浏览 0提问于2018-02-14得票数 11
回答已采纳
我有动画进入窗口在中间的块用IntersectionObserver制作。我不知道如何正确删除第一次动画后的观察。
我的代码：
((window, document) => {
window.onload = () => {
const missionBlock = document.getElementById('mission_block');
const missionText = document.getElementById('mission_text');
const missionImg = d
浏览 1提问于2021-12-29得票数 0
回答已采纳
我使用Squarespace来创建我的投资组合站点。他们有一个“块”，允许我使用嵌入的Adobe XD代码(如下所示)来显示我的应用程序原型。原型运行良好，但当页面加载时，它会自动将页面移动到原型的一半。
<center>
<iframe id="nautilab" width="414" height="736" src="https://xd.adobe.com/embed/afb3c48a-11a6-4296-73d9-068cd5b0c5ef-d982" allowfullscreen" fram
浏览 0提问于2020-01-30得票数 0
我在start上添加了以下钩子：
const scrollObserver = useCallback(
(node) => {
new IntersectionObserver((entries) => {
entries.forEach((en) => {
if (en.intersectionRatio > 0.5) {
pagerDispatch({ type: 'ADVANCE_PAGE' }
浏览 2提问于2020-05-18得票数 1
回答已采纳
1回答
我在字幕中使用交集观察器，在那里我观察第一个孩子何时离开视口，删除第一个孩子，将新的(相同的)第一个孩子向右移动元素的宽度(使用marginLeft)，然后将另一个相同的孩子元素附加到父div的孩子的末尾。 这可以工作一次，但交叉点观察者不会触发第二次，即使新的第一个子对象与删除的第一个子对象相同。 我想知道变异观察者在这里是否会更有用，但不确定如何去做！ let firstChild = document.querySelector('.marquee').firstElementChild;
let target = firstChild;
let options =
浏览 18提问于2021-10-17得票数 1
我正在创建一个按钮，它使用Javascript中的scrollIntoView()函数将客户发送到Woocommerce中的评论字段。 我也在努力隐藏和显示按钮，当评论部分进入视口时，它是有效的，但我想更进一步。当浏览器底部点击ID时，就按下按钮，这是我不想要的。我想让这个按钮在ID到达浏览器顶部时显示出来。 下面是基本的HTML： <button onClick="scrollToComment()" id="scroll-btn">Leave a Review</button>
<div id="reviews
浏览 8提问于2020-03-28得票数 0
回答已采纳
我有以下方法：
componentDidLoad() {
this.image = this.element.shadowRoot.querySelector('.lazy-img');
this.observeImage();
}
observeImage = () => {
if ('IntersectionObserver' in window) {
const options = {
rootMargin: '0px',
threshold: 0.1
浏览 39提问于2019-11-16得票数 8
回答已采纳
1回答
我需要找到一种方法来确保每次我按下up或down时，我的名为question_text的div都会向上或向下滚动(如果它是可见的)。 问题是，在我的整个代码中，我临时用加载动画替换了这个div，当可见性被重置时，它似乎会将焦点从question_text上移开。 我曾尝试使用自动对焦来保持焦点，但改变可见性似乎妨碍了我的工作。 <div id="question_text" class="question-text" onblur="this.focus()" autofocus="true"> 我还使用了下面的代码
浏览 20提问于2021-07-26得票数 1
回答已采纳
我正在尝试构建我的gatsby项目，但由于IntersectionObserver不被识别，我无法构建。我在InView组件中使用intersectionObserver： import React, { useRef, useState, useEffect } from 'react'
const InView = ({ children }) => {
const [boundingClientY, setBoundingClientY] = useState(null)
const [direction, setDirection] = us
浏览 22提问于2019-12-20得票数 6
回答已采纳
我正在使用现代图来检查浏览器是否支持intersectionobserver。如果不是，它应该加载一个多填充，我们有，这应该是可行的。然而，在Chrome < v50中，它似乎不像预期的那样：
Uncaught TypeError: document.body.append is not a function
守则是：
if (Modernizr.intersectionobserver) {
// supported already
} else {
const script = document.createElement('script');
浏览 5提问于2022-09-03得票数 1
回答已采纳
1回答
我的组件使用无限滚动(通过IntersectionObserver)获取和显示帖子。组件进行的API调用取决于当前获取的帖子数。这将作为一个偏移量传递给API调用。
期望的效果是，如果posts数组是空的，那么它的长度是0，我的API将返回前5个帖子。当UI中的最后一篇文章与viewport交叉时，将进行另一次提取，但这次API调用传递的偏移量为5，因此API跳过集合中的前5个帖子，而是返回下一个5。
这是我的代码：
export default function Feed() {
const [posts, setPosts] = useState([]);
const fetch
浏览 0提问于2022-01-14得票数 0
1回答
这是我第一次使用IntersectionObserver，我遵循了这个文档https://www.netguru.com/codestories/infinite-scroll-with-vue.js-and-intersection-observer。但是因为这个错误我被屏蔽了 [Vue warn]: Error in mounted hook: "TypeError: Failed to construct 'IntersectionObserver': The provided value is not of type '(Element or Docu
浏览 88提问于2020-05-04得票数 5
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
