繁体   English   中英

元素离开视口时的交点观察者

Intersection Observer when element leaves the viewport

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

有没有办法检测元素是否使用交叉观察者离开视口? 例如,我在屏幕上有一个元素,当元素顶部到达视口顶部时,我想触发一个回调。 来自MDN:

Intersection Observer API允许代码注册一个回调函数,该函数在他们希望监视的元素进入或退出另一个元素(或视口)时执行,或者当两者相交的数量按请求的数量变化时执行。 - ( https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

因此,如果我执行类似下面的操作,我会认为当元素的顶部也触及视口的顶部时,回调会被触发?

var options = {
    root: document.querySelector('#element'),
    rootMargin: '0px',
    threshold: 0
}

var observer = new IntersectionObserver(callback, options);

但它似乎只是在元素的顶部滚入并击中视口的底部时触发,但不是两者。 想法?

2 个回复

如果我正确理解你要做的事情,你可以将rootMargin设置为'0px 0px -100%' 此外, threshold: 0是默认值,因此您无需将其包含在选项对象中。

如果您在此处查看 API文档,则可以将threshold选项作为数组传递,以定义应该触发回调的交叉级别。 因此,每次元素可见时,传递类似[0, 0.8]会触发回调至少80%,并且当元素不可见时(退出视口)也会触发回调。

这样做可能会有其他并发症。 例如,如果存在多个元素,则只要一个元素可见,其他元素就可以退出视口,从而触发不必要的回调。 我处理它使用一些额外的if条件在我的情况。 我还必须进行一些命中和试验,以确定最合适的thresholdintersectionRatio threshold

2 当元素不在视口中时,Intersection Observer API 仍在执行

我在父组件中多次使用子组件。 在子组件中,我使用交叉观察器来识别每次子组件在视口中可见的时间并执行某些功能。 在执行此操作时,我面临一个问题,例如,即使页面上只有一个子组件可见,交叉点观察者也会在页面加载时多次执行(isIntersecting 标志始终为真)。 有人可以在这里抛出一些光来解决这个问 ...

3 视口范围内的交点观察器

这是我的第一个问题,对于我的baaad英语(我是意大利语,英语不佳)和很少的javascript知识感到抱歉。 我正在尝试使用Intersection Observer,以在部分文本进入视口时获取动画。 这是我的JavaScript代码: 开始JAVASCRIPT代码 这是我简 ...

4 当 CSS 转换将元素带入视口时,Intersection Observer 无法正常工作

我在没有特定选项的情况下初始化了一个 Intersection Observer,因此阈值等于 0.0,并且事件应该在被观察元素的第一个像素进入视口时触发。 这就是当我通过滚动触发观察者以及使用使用简单的 CSS 属性(如top定义的过渡触发它时会发生的情况。 但是当观察到的元素出现在视口中时,由 ...

5 使用Intersection Observer检查元素是否在浏览器视口中完全可见

页面加载后,我想使用Intersection Observer API观察一个元素(addonCard),以了解该元素是否完全可见。 如果该元素不可见或部分可见,我希望将该元素滚动到完全可见的状态。 如果它已经完全可见,我希望该元素停止被观察。 据我了解,您可以通过将threshold属性设置为1来 ...

10 交叉点观察者未检测到微小的视口调整

我最好的猜测是这是由选项“阈值”(设置为 0)引起的 - 但在玩弄之后我想我会寻求一些帮助。 所以! 一旦页面的新部分进入视图,交叉点观察器就会触发(这正常工作 - 在我的实际网页中触发导航栏以突出显示页面的该部分)。 问题是我认为哪种行为是正确的,但我正在寻找修复方法是一旦我向上滚动,从 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM