IntersectionObserver是否支持水平滚动观察？
IntersectionObserver是一个用于观察目标元素与其祖先元素或视窗交叉状态的API，用于实现懒加载、无限滚动、可视化埋点等功能。它可以用于前端开发中，通过监听目标元素的可见性来触发相应的操作。
关于IntersectionObserver是否支持水平滚动观察，答案是支持的。IntersectionObserver可以观察目标元素与其祖先元素或视窗的交叉状态，包括水平和垂直方向上的交叉。通过设置IntersectionObserver的root参数为目标元素的祖先元素，可以实现水平滚动观察。
在实际应用中，可以通过IntersectionObserver的回调函数来处理目标元素进入或离开视窗或祖先元素的交叉状态，从而触发相应的操作。例如，可以在目标元素进入视窗时加载图片，实现图片的懒加载功能。
腾讯云提供了云计算相关的产品和服务，其中与IntersectionObserver相关的产品可能是前端开发相关的产品，如CDN加速、对象存储等。具体推荐的产品和产品介绍链接地址可以参考腾讯云官方文档或咨询腾讯云的客服人员。
相关·内容
我做了几个垂直滚动IntersectionObserver模块，但我对水平滚动感兴趣(根将是一个div，观察目标将是一个img)。我想要观察当img变大但div保持视口宽度时的变化。re:观察水平交叉，所以我不确定它是否被支持？
浏览 18提问于2019-10-10得票数 1
1回答
我的页面上有一个部分，当用户滚动时，会触发一个事件。该解决方案使用IntersectionObserver，非常适合我的需要。然而，我想调整这个观察者的rootMargin的大小，当使用已经存在的时候。现在，有这样一个观察者时，最简单的方法是：let observer = new IntersectionObserver是否有可能，以及如何改变一旦创建的交叉观察者的行为
浏览 0提问于2018-03-27得票数 5
回答已采纳
我可以使用IntersectionObserver：let observer = new IntersectionObserver(cb,)当我使用root: null (默认值)时，我处于隐式根模式，因此root默认为顶级文档(完全是我想要的)，当观察iframe的document.documentElement时，观察者计算与父页面的交集。当我
浏览 2提问于2021-03-30得票数 1
1回答
我试图为无限滚动列表设置一个IntersectionObserver。如果已经到达列表的最后一项，我想向IntersectionObserver检查。到目前为止，我的IntersectionObserver设置如下所示： const config = { };const observer = new IntersectionObserver((entries) => {
entries.forEach((
浏览 2提问于2017-12-21得票数 2
回答已采纳
根据我的经验，在Edge中，你的IntersectionObserver回调接收到的“目标”已经被设置为新滚动进来的元素，而不是(像Chrome和火狐一样)，它仍然反映了开始滚动出去的元素。我使用了较小的阈值，但不幸的是，我的函数认为滚动捕捉失败了，并且没有费心更改当前图像标记点。我想我只需要把“如果”去掉，看看我是否能修复FF。编辑: Firefox似乎只允许我观察交叉点观察者的两个元素。我必须为每个被观察的元素创建一个单独的Intersec
浏览 12提问于2019-11-22得票数 1
回答已采纳
1回答
我输出了一堆图像，每个图像都封装在一个交叉口观察者中，使用的是svelte-相交观察者：import IntersectionObserver from "svelte-intersection-observerlet intersects = {};</script>
{#each posts as p}
<IntersectionO
浏览 2提问于2021-12-25得票数 0
我想知道如何将jQuery中的代码转换为纯Javascript$('.revealedBox').each(function() { $(this).addClass('revealedBox-in');});
$('.revealedBox').each(
浏览 17提问于2020-03-10得票数 0
回答已采纳
当某个元素在视图中显示一定数量(0-100%)时，就会触发IntersectionObserver。这意味着，当元素为时，它不再触发视口中的100%，因为阈值没有变化。我有一个高度为200vh的元素，当我在IntersectionObserver元素上滚动时，希望触发它。因此，元素总是100%在视口内。
有什么方法可以在滚动元素时触发观察者吗？我不能使用滚动事件，因为我使用的是CSS scroll-snap，它导致事件被浏览器吞没，然后JS才能检测到它。
浏览 0提问于2019-09-15得票数 19
当元素通过滚动进入或离开viewport时，下面的代码将触发状态更改[visible, set] = useState(false)
const observer = new IntersectionObserver((e) => { }, {root: null, rootMargin: '0px', thr
浏览 6提问于2021-12-23得票数 0
回答已采纳
1回答
我使用下面的代码滚动并快照到页面上的各个部分。它在一开始很好，但后来动画播放有相当多的延迟。动画也是紧张的，似乎是在随机的间隔发生。请帮帮我！offset().top 500 } lastSt = st;}另外，脚本应该滚动到当前部分之前或之后的部分但是它正在滚动整页，这不是我想要的。
浏览 1提问于2020-02-06得票数 0
2回答
，所以在添加新内容之后，我应该将元素上的滚动条移到底部。所以我的问题是，有没有其他方法来检查滚动条是否在底部？我可以使用任何哨兵元素，并使用css定位它，直到它被隐藏(例如使用visibility: hidden)。也许使用新的迭代节或调整大小的观察者，它可以是性能改善，只有少数浏览器才能访问。 function have_scrollbar() {
浏览 0提问于2019-12-25得票数 1
回答已采纳
我的应用程序中有一个(编写得相当糟糕) javascript组件，它处理无限滚动分页，我试图重写它以使用IntersectionObserver，正如描述的，但是我在测试它时遇到了问题。是否有一种方法来驱动QUnit测试中观察者的行为，即用我的测试中描述的一些条目触发观察者回调？handle the infinite scroll var io = new Intersectio
浏览 10提问于2017-05-29得票数 50
回答已采纳
我试图在我的角度应用程序中使用IntersectionObserver，但它不像预期的那样工作。我没有一个可重复的例子，因为这会影响到高效的实现，也许这个简单的例子就足够了。;
this.observer = new IntersectionObserver(entries => {(2) [IntersectionObserverEntry, IntersectionObserverEntry]
TopElement is int
浏览 6提问于2022-02-16得票数 2
回答已采纳
我有一个IntersectionObserver来延迟加载图像等等，其中el是HTML，offset是一个数字。const observer = new IntersectionObserver((entries) => { }--这个
浏览 7提问于2020-05-23得票数 1
我使用IntersectionObserver来突出显示当前部分对应的导航项目。除非我向上滚动，否则一切似乎都很正常。当我这样做时，我刚离开的部分会得到isIntersecting: false (这是应该的)，但我刚输入的部分不会被观察到。创建一个新的IntersectionObserver用于向上滚动似乎是多余的，而且是错误的，但我不知道如何使代码在两个滚动方向上都工作。 非常感谢您的宝贵帮助！document.querySelectorAll(".section"
浏览 24提问于2020-11-06得票数 0
回答已采纳
readMarker.value) () => { observer.observe(readMarker.value)这样做的想法是，当用户滚动到内容的底部但是，一旦我加载页面，事件就会立即触发，而我根本就没有时间滚动。对于后续实例的相同事件也会在每个实例加载后立即触
浏览 3提问于2021-11-01得票数 3
回答已采纳
我目前正试图在我的angularjs应用程序中使用IntersectionObserver来实现延迟加载。 restrict: "A", const observer = new IntersectionObserver
浏览 0提问于2018-05-15得票数 0
1回答
我正在尝试在Angular中设置IntersectionObserver，但是我不能让它工作。当我从服务器使用HttpClient向下滚动时，我想加载数据。IntersectionObserverService) { }
this.inter.createAndObserve(this.ob); providedIn: 'root'export class Intersec
浏览 12提问于2021-04-27得票数 2
回答已采纳
我所拥有的==================================
提要页，其中正在实例化<em
浏览 8提问于2022-05-18得票数 0
是否有一种方法可以检测元素的getBoundingClientRect()矩形在没有实际计算getBoundingClientRect()的情况下发生了变化？像是“肮脏的旗帜”吗？
浏览 3提问于2016-10-25得票数 47
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
