Javascript 针对不同窗口大小的交点观测器微调

这是我目前的代码：

const mediaInViewport=document.queryselectoral（'.media'）；
const links=Array.from（document.querySelectorAll（'.link'）；
设actLink=links[0]；
document.body.addEventListener（'单击'，（事件）=>{
如果（event.target.tagName=='a'）{
actLink.classList.remove（'active'）；
actLink=links.find（link=>event.target.href===link.href）
actLink.classList.add（'active'）；
}
}，错）
观察者=新的相交观察者（（条目，观察者）=>{
条目。forEach（（条目）=>{
if（entry.target&&entry.isIntersecting）{
const closestParent=entry.target.closest（'section'）；
如果（亲密父母）{
actLink.classList.remove（'active'）；
actLink=links.find（link=>
link.href.slice（link.href.lastIndexOf（'#'））==`${closestParent.id}`
)
actLink.classList.add（'active'）；
}
}
});
}, {
阈值：0
});
window.addEventListener（'DOMContentLoaded'，（）=>{
setTimeout（//等待图像完全加载
() => {
mediaInViewport.forEach（（项目）=>{
观察员.观察（项目1）；
});
}, 1000);
});
*{
保证金：0；
填充：0；
字体系列：无衬线；
字体大小：30px；
文字装饰：无；
颜色：继承；
}
身体{
显示器：flex；
游标：默认值；
}
#左,，
#对{
宽度：50%；
高度：100vh；
溢出y：滚动；
滚动行为：平滑；
}
#左{
背景色：rgb（220、220、220）；
}
#对{
背景色：rgb（200200200）；
}
.媒体{
填充：10px；
填充底部：0；
}
.媒体：第n个最后一个孩子（1）{
边缘底部：10px；
}
img{
显示：块；
宽度：100%；
}
.链接{
光标：指针；
}
.主动{
背景色：黑色；
颜色：白色；
}


const mediaInViewport=Array.from（document.queryselectoral（'.media'）；
const sections=Array.from（document.querySelector（'#right'）.children）；
const links=Array.from（document.querySelectorAll（'.link'）；
设actLink=links[0]；
让actSection=null；
设targetLink=null；
设targetSection=null；
document.body.addEventListener（'单击'，（事件）=>{
如果（event.target.tagName=='A'）{
event.preventDefault（）；
targetLink=event.target；
targetSection=sections.find（section=>section.id==targetLink.href.slice（targetLink.href.lastIndexOf（'#'）+1））
location.hash=targetLink.href.slice（targetLink.href.lastIndexOf（'#'）；
actLink.classList.remove（'active'）；
actLink=links.find（l=>event.target.href===l.href）
actLink.classList.add（'active'）；
}
}，错）
观察者=新的相交观察者（（条目，观察者）=>{
条目。forEach（（条目）=>{
if（entry.target&&entry.isIntersecting）{
const closestParent=entry.target.closest（'section'）；
如果（亲密父母）{
actLink.classList.remove（'active'）；
如果（！targetLink）{
actLink=links.find（link=>
link.href.slice（link.href.lastIndexOf（'#'））==`${closestParent.id}`
) 
}否则{
if（closestParent===targetSection）{
targetLink=null
}
}
actSection=sections.find（section=>section.id==actLink.href.slice（actLink.href.lastIndexOf（'#'））
actLink.classList.add（'active'）；
}
}
});
}, {
阈值：0.3
});
window.addEventListener（'DOMContentLoaded'，（）=>{
setTimeout（//等待图像完全加载
() => {
mediaInViewport.forEach（（项目）=>{
观察员.观察（项目1）；
});
}, 1000);
});     
*{
保证金：0；
填充：0；
字体系列：无衬线；
字体大小：30px；
}
身体{
显示器：flex；
游标：默认值；
}
#左,，
#对{
宽度：50%；
高度：100vh；
溢出y：滚动；
滚动行为：平滑；
}
#左{
背景色：rgb（220、220、220）；
}
#对{
背景色：rgb（200200200）；
}
.媒体{
填充：10px；
填充底部：0；
}
.媒体：第n个最后一个孩子（1）{
边缘底部：10px；
}
img{
显示：块；
宽度：100%；
}
.链接：活动{
光标：指针；
}
a:目标{
背景色：黑色；
颜色：白色；
}
a{
文字装饰：无；
颜色：继承；
}
章节：目标{
背景色：黑色；
颜色：白色；
}
.主动{
背景色：黑色；
颜色：白色；
}

Thaaanks！我想现在好多了。但是，如果窗口大小处于全景式的方向，并且图像无论如何都会被切断，那么只有在设置“阈值：0”时，它才能正常工作。在所有其他情况下，“阈值：0”将破坏该函数。你有办法解决这个问题吗？没有，我还没有。。。但是我会考虑的。也许css和媒体查询会有帮助，，，你也可以根据方向改变阈值。我有一些改进代码的想法，但我会在之前检查一下