同一页面上多个视频的交叉观察器
我有一个用WordPress制作的公文包页面，在该页面上，我有5个视频需要在视区中播放，在视区外停止。 我使用了以下脚本，该脚本仅适用于页面上的第一个视频。 const video = document.querySelector("video"); let playState = null; const observer = new IntersectionObserver((ent
..
intersection-observer相关内容
IntersectionObserver iOS &苹果浏览器
我的目标是在用户进一步滚动到视频元素时将位置更改为视频元素.我正在使用 Intersection Observer API，因为我需要处理来自 AdForm Banner/iFrame 的页面滚动. 这是我的代码: function createObserver() {var 观察者；变量选项 = {根:空，rootMargin: "0px",阈值:buildThresholdList()
..
滚动反应原生后如何检查元素是否可见?(跟踪展示次数和点击次数)
如何在滚动 react-native 后检查元素是否可见?看到了一些反应的例子，但我专门寻找反应原生.想要跟踪展示次数和点击次数 解决方案 最终实现了一个库 https://www.npmjs.com/package/react-native-组件视图 从'react-native-component-inview'导入InViewconst [isInView, setIsInV
..
带有 React & 的 IntersectionObserver挂钩
我正在尝试使用 React/Hooks 和 Intersection Observer API 跟踪元素可见性.但是，我不知道如何使用“useEffect"设置观察.有谁知道我该怎么做?我的解决方案不起作用... function MainProvider({ children }) {const [targetToObserve, setTargetToObserve] = useState(
..
参考错误:找不到变量:IntersectionObserver
我正在尝试在ios 13上运行的cordova 8.0.0应用程序中使用IntersectionObserver.当我通过野生动物园检查我的应用程序时，看到初始化错误: ReferenceError:找不到变量:IntersectionObserver 这表明IntersectionObserver不可用，我应该使用polyfill.但！我读过很多帖子，声称iOS Safari 12+
..
针对不同窗口大小的Intersection Observer微调
到目前为止，这是我的代码: const mediaInViewport = document.querySelectorAll('.media');const links = Array.from(document.querySelectorAll('.link'));让actLink = links [0];document.body.addEventListener('click'，(
..
如何使用交点观察器为不同的目标调用不同的功能?
我正在网站上使用Intersection Observer API.对于使用它的每个实例，我都使用相同的配置(主视口).我的问题是，触发回调时，我需要发生不同的事情.对于某些人，我想延迟加载图像.对于某些人，我想初始化轮播，等等. 是否可以对所有这些不同的应用程序使用相同的观察者，或者对于每个唯一的回调都必须使用不同的观察者? 解决方案 您可以为所有不同的目标重用相同的交集观察者和相
..
使用Intersection Observer API针对不同目标的不同回调
我正在网站上使用Intersection Observer API.对于使用它的每个实例，我都使用相同的配置(主视口).我的问题是，触发回调时，我需要发生不同的事情.对于某些人，我想延迟加载图像.对于某些人，我想初始化轮播，等等. 是否可以对所有这些不同的应用程序使用相同的观察者，或者对于每个唯一的回调都必须使用不同的观察者? 解决方案 您可以为所有不同的目标重用相同的交集观察器和相
..
IntersectionObserver在Safari或iOS中不起作用
我有一段代码，根据元素是从顶部还是底部滚动到视口或从视口滚动出来，向元素添加不同的css类. 它使用路口观察器，因为比scroll事件更好地处理大量元素. 但是，我在使用此代码时遇到两个问题: 它在Safari(最新版本)中不起作用 它不适用于苹果移动设备 这很奇怪，因为IntersectionObserver在Safari上甚至在iOS上的移动浏览器上都可以正常工作.
..
角度性能:如果组件不在视口中，则更改检测分离
我要从当前视口中分离所有组件的更改检测 在线观看演示 import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef, ViewChild, OnInit, OnDestroy, AfterViewInit } from '@angular/core'; @Component({ se
..
交叉点观察器polyfill无法正常工作Safari
我需要检测从另一个域加载的iframe是否在视口中. 这在Chromem，Firefox和IE中称为Intersection Observer的本机中正常运行.但是，这在Safari中不起作用. 已为此创建了一个polyfill: Github链接，并且应该也可以在Safari上工作. 我使用以下代码对其进行了测试: 站点A:
..
删除元素时是否应断开IntersectionObserver的连接
在单页应用程序中，通常会删除和替换元素.在从DOM中删除的元素上，可能有一个IntersectionObserver(或任何其他种类) 对于事件，我从不打扰，因为它们是在目标上绑定并触发的，因此保留它们应该相当无害.对于IntersectionObserver，我有点担心所有实例是否在视图更改时都会得到检查. 考虑我的Lazy.ts的以下部分 setIntersectionObs
..
盖茨比-IntersectionObserver未定义
我正在尝试构建我的gatsby项目，但由于无法识别IntersectionObserver而无法执行.我在InView组件中使用了sectionObserver: import React, { useRef, useState, useEffect } from 'react' const InView = ({ children }) => { const [bounding
..
JS-使用IntersectionObserver的测试代码
我的应用程序中有一个(写得不好)的javascript组件，可以处理无限滚动分页，并且我正尝试将其重写为使用IntersectionObserver，如是否有一种方法可以驱动QUnit测试中观察者的行为，即使用测试中描述的某些条目来触发观察者回调? 我想出的一个可能的解决方案是在组件的原型中公开回调函数，并在我的测试中直接调用它，如下所示: InfiniteScroll.prototy
..
使用“路口观察器"(IO)更改样式标题/导航
提要最新 我从scroll event方法开始了这个问题，但是由于使用IntersectionObserver的建议，这似乎是更好的方法，因此我试图使其以这种方式工作. 目标是什么 我想通过查找(我在想什么?)其class或data将会覆盖默认的header样式(白色上的黑色). 标题样式: font-color: 根据内容(div/section)，默认的he
..
为什么Intersection Observer在第一个元素相交时向所有观察到的元素添加类？
请原谅我的无知，因为我正在学习。我正在通过添加 .entry 类的 div 来与交点观察器相交时进行动画处理对他们来说是 .entry-animation 的类。 我以前从未选择所有元素并进行动画处理。在第一个相交处，所有元素同时进行动画处理。我在做什么错了？ 这是演示： JSFiddle 以下是HTML ：
..
MS Edge:IntersectionObserver.对你起作用吗?
在任何人在这里付出过多努力之前，我已经有了一个讨厌的解决方法.我只想知道是否有人在使用它. Edge的第15版现已发布，并且支持相交观察器(用于延迟加载). 我已经实现了它，并且它在所有支持它的浏览器(Chrome和Opera.尚未实现Firefox和Safari)中都可以正常工作，但是在Edge中根本没有实现. 没有引发任何错误，但从未调用过回调. handleInter
..
IntersectionObserver回调在页面加载时立即触发
我对 IntersectionObserver API 很陌生，我一直在尝试这段代码: let target = document.querySelector('.lazy-load'); let options = { root: null, rootMargin: '0px', threshold: 0 } let observer = new Interse
..
交叉口观察者不能使用位置：固定的目标
我试图通过交集观察者调用回调。 我希望目标为样式：“position：fixed”并通过 style.top 移动它。 我还用 style指定了根元素，它是目标的祖先：“position：relative”。 但是当目标和观察者相交时，回调函数不会被触发。 是否有我错过了一些限制？ 这是我输入的内容：
..
我如何知道IntersectionObserver滚动方向？
在返回的对象中，我看到的最接近的可能性是与 boundingClientRect 保存最后一个滚动位置的类型，但我不知道处理 boundingClientRect 最终会导致性能问题。 是否可以使用交点事件计算滚动方向（上/下）？ 我已经添加了这个基本片段，所以如果有人可以帮助我。 我会非常感谢。 是代码片段： var options = {rootMargin：'0
..