Javascript 当从顶部或底部滚动到视图中时，使用交叉点观察者向元素添加不同的类

我有一段jQuery代码，它在元素滚动到视口时向元素添加css类，并在元素滚动出视口时删除该类

到目前为止，代码的工作原理如下：

• 当元素滚动到视口中时，会添加类“inview”
• 当元素从视口中滚出时，类“inview”将被删除

---

到目前为止还不错。但我想实现的是：

滚动到视图中：

• 当元素从页面底部滚动到视口中时，会添加类“inview bottom”
• 当元素从页面顶部滚动到视口中时，会添加类“inview top”

滚动出视图：

• 当元素从页面底部滚动出视口时，将添加类“outview bottom”
• 当元素从页面顶部滚动出视口时，将添加类“outview top”

清理：

• 当一个元素从页面的顶部或底部滚动到视口中时，所有“outview-*”类都应该被删除
• 当元素从页面的顶部或底部滚动出视口时，应删除所有“inview-*”类

---

有人在评论中建议使用，在阅读了更多关于它的信息后，我相信它提供了满足要求的最佳方法

这是我的代码（整版打开-预览效果不好）。你也可以找到

函数查看（opt）{
if（opt.selector==未定义）{
log（'inView需要有效的选择器'）；
返回false；
}
var elems=[].slice.call（document.querySelectorAll（opt.selector）），
once=opt.once==未定义？true:opt.once，
offsetTop=opt.offsetTop==未定义？0:opt.offsetTop，
offsetBot=opt.offsetBot==未定义？0:opt.offsetBot，
计数=元素长度，
winHeight=0，
滴答声=假；
函数更新（）{
var i=计数；
而(我--){
var elem=elems[i]，
rect=elem.getBoundingClientRect（）；
如果（rect.bottom>=offsetTop&&rect.top您提供的小提琴工作正常，几乎没有变化。您需要将观测者应用于所有元素才能工作

请参见此示例：


const-config={
root:null，
rootMargin:'0px'，
阈值：[0.1,0.5,0.7,1]
};
设previousY=0；
让前一个比率=0；
let observer=新的IntersectionObserver（函数（条目）{
entries.forEach（entry=>{
const currentY=entry.boundingClientRect.y
const currentRatio=entry.intersectionRatio
const isIntersecting=entry.isIntersecting
常量元素=entry.target；
element.classList.remove（“outview top”、“inview top”、“inview bottom”、“outview bottom”）；
//向上滚动
如果（当前<先前）{
const className=（currentRatio>=先前的比率）？“查看顶部”：“查看顶部”；
element.classList.add（className）；
//向下滚动
}否则如果（当前>以前）{
const className=（当前比率）{
观察者，观察者（图像）；
})；
.box{
宽度：100%；
高度：50vh；
边缘底部：10px；
背景：浅蓝色；
过渡：不透明度。2s缓解；
显示器：flex；
证明内容：中心；
对齐项目：居中；
字号：3em；
}
[class*='inview']{
不透明度：1；
}
[class*='outview']{
不透明度：0.6；
}

你真的应该使用它。这是为了在元素进入视图时观察它们并对其作出反应而设计的。嗨，谢谢你的提示！我真的不知道这是什么以及如何使用它。我只能在别人的帮助下将上面的代码组合起来-我自己无法编写或理解它。你能给我演示一下吗e？我发现了这一点，但我的代码无法使用它：谢谢你的帮助！我在这里用你的代码做了一些尝试：但是，它有时反应太快。我们能否更改代码，使其仅在视口中只有50px的元素仍然可见时添加“outview”类，并且它还添加了“inview”只要在视口中看到元素的50px，就可以初始化。您可以将
阈值：[0.2,0.7,1]
的值更改为值数组或单个值。但是，这些值表示百分比（而不是像素）调用回调的时间。因此，在本例中，当div为20%、70%和100%滚动时，将调用回调。那么这四个值到底意味着什么？为什么是四个值？当我将
[0.1,0.5,0.7,1]
更改为
[0.1,0.2,0.3,0.4]时会发生什么
？是相对于div高度的百分比还是相对于视口高度的百分比？这些值是与div高度相关的百分比。这是观察者决定采取行动的时候。您可以添加0到1之间的任意数量的值。您可以在此链接（在“阈值”下）中了解更多信息：.好的，但是为什么有四个不同的值？它们对应于inview top、inview bottom、outview top、outview bottom吗？如果是，顺序是什么？