The IntersectionObserver当元素在视口中可见达到一定程度 (0-100%) 时触发。这意味着，当元素是已经 100% 在视口中它不再触发，因为阈值没有变化。
我有一个高度为200vh我想要IntersectionObserver当我滚动时触发over这个元素。因此元素始终 100% 位于视口内。
有没有办法在滚动元素时触发观察者？
我无法使用滚动事件，因为我使用的是 CSSscroll-snap，这会导致事件在 JS 检测到之前被浏览器吞掉。
希望我能够在这里抓住您的挑战，因此我将尝试提出一个适合您的用例的解决方案，即使没有代码可用作参考。
据我了解你正在使用scroll-snap当用户通过滚动进行交互时捕捉部分，您的目的是让 Intersection Observer 在用户从一个部分移动到另一个部分时触发。
在下面的示例中，您将看到如何捕捉部分，但调试器会显示向用户显示哪个部分。
const debuggerSpan = document.querySelector('#current-section');
const sections = [...document.querySelectorAll('.scroll-snap-item')];
const div = document.querySelector('.scroll-snap-container');
/*
* This method will get called any time a section touches the top
* of the viewport.
*/
const intersectionDetected = (entries, observer) => {
entries.forEach((entry) => {
const {
innerText
} = entry.target;
if (!entry.isIntersecting) return;
// Making it obvious that the current section is correct.
debuggerSpan.innerText = innerText;
});
};
const observer = new IntersectionObserver(intersectionDetected, {
/*
* Root should be div and not the default (doc).
*/
root: div,
/*
* Negative margin from the bottom creates an invisible line
* to detect intersections.
*
* The reason why the recommendation is to use -1% and -99% is to
* avoid the race condition between two intersections happening
* (AKA the section about to be out of the viewport and the section
* about to enter the viewport).
*/
rootMargin: '-1% 0% -99% 0%',
/*
* Default value but making it explicit as this is the
* only configuration that works.
*/
threshold: 0
});
sections.forEach(section => observer.observe(section));
.scroll-snap-item {
height: 100vh;
display: grid;
place-items: center;
font-size: 4rem;
scroll-snap-align: start;
}
.scroll-snap-container {
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}
/* Decorative stuff below*/
.scroll-snap-item:nth-child(odd) {
background-color: gray;
}
aside {
position: fixed;
font-size: 1.6rem;
bottom: 16px;
right: 16px;
background-color: #333;
color: white;
padding: 16px;
border-radius: 32px;
}
<div class="scroll-snap-container">
<section class="scroll-snap-item">1</section>
<section class="scroll-snap-item">2</section>
<section class="scroll-snap-item">3</section>
<section class="scroll-snap-item">4</section>
<section class="scroll-snap-item">5</section>
<section class="scroll-snap-item">6</section>
</div>
<aside>Current section: <span id="current-section"></span></aside>
我写了几篇实用的文章，涵盖了这一切背后的原因以及解决这种情况的思维过程。如果内容不够清楚，请随时阅读并发表评论：
- 使用 Intersection Observer API 可以轻松进行滚动监视。 https://wilsotobianco.hashnode.dev/scrollspying-made-easy-with-the-intersection-observer-api/
- Intersection Observer API 的图形化介绍。 https://wilsotobianco.hashnode.dev/a-graphical-introduction-to-the-intersection-observer-api
这两本书都可以快速阅读，并且应该提供您使用 Intersection Observer 解决这个问题甚至更复杂问题所需的一切。另外，请随意使用我编写的这个工具十字路口观察者游乐场 https://wilsotobianco.com/experiments/intersection-observer-playground/您可以在其中尝试不同的配置并查看它们如何影响交叉点触发器。
希望这有帮助！
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
