Javascript 替换Croll上的多个类？

本周我一直在开发一个新的应用程序，从这里的社区收到了很多建议和有用的代码（谢谢！）

我的JS技能非常不稳定，但我正在更好地学习，我的JS展示了我刚才所拥有的，它的工作或多或少是完美的。我已经组合了两个单独的函数来帮助onClick工作，但是这显然不能在onScroll上工作。我正在努力理解这方面的最佳实践是什么，因为我仍然不完全理解JS的规则

问题：

onScroll

激活的

类可以正常激活（变为黄色），但是
ion ios单选按钮on
没有切换到
ion ios单选按钮off
（反之亦然）。但是，如果单击图标，它们将完全改变

我尝试过搞乱其中的内容，比如添加更多的替换/添加/删除属性，但当然它们可能不起作用，因为我不确定将它们放置在何处。我知道这段代码也可以压缩，但我的技术水平并没有那么高

如有任何建议和帮助，我将一如既往地感谢


//---
const main=document.querySelector（'main'）；
const nav=document.querySelector（'.bottomnav'）；
const setIconState=（图标，状态）=>icon.className=状态？
icon.className.replace（'button-off'，'button-on'）：
icon.className.replace（'button-on'、'button-off'）
常量切换图标=元素=>{
const className=element.className；
element.className=className.indexOf（'button-on'）>-1？
setIconState（元素，false）：
setIconState（元素，true）；
}
const setIconActiveState=（图标，状态）=>icon.className=状态？
icon.className=`${icon.className}活动`:
icon.className=icon.className.replace（'active'，''）
document.querySelectorAll（'.bottomnav a.icon'）
.forEach（图标=>{
icon.onclick=（e）=>{
常数{
目标：点击span
}=e；
常量同级=[…clickedSpan.parentElement.parentElement.querySelectorAll（'a.icon'）]
.filter（同级=>同级！=单击的范围）；
兄弟姐妹。forEach（图标=>{
setIconState（图标，false）；
setIconActiveState（图标，false）；
});
setIconState（单击span，true）；
SetIConactiveEstate（单击范围，为真）；
};
});
让我们结束；
函数onwheel（）{
/*当使用滚轮时，将Y方向滚动到X方向。这样，滚轮用户可以通过向下滚动向右滚动来获得好处，而触摸和其他用户可以获得默认行为*/
event.preventDefault（）；
事件。stopImmediatePropagation（）；
main.scrollLeft+=event.wheelDeltaY；
}
函数onscroll（）{
const current=Array.from（main.children）.find（child=>{
返回child.offsetLeft>=main.scrollLeft-innerWidth/2；
});
const link=Array.from（nav.children）.reduce（（find，child）=>{
child.classList.remove（'active'）；
返回find | |（child.href.indexOf（current.id）>=0？child:find）；
}，假）；
if（link）link.classList.add（'active'）；
clearTimeout（滚动结束）；
scrollend=设置超时（onscrollend，100）；
}
函数onscrollend（）{
/*滚动结束后，捕捉适当的元素。这可以通过动画来完成*/
clearTimeout（滚动结束）；
const current=Array.from（main.children）.find（child=>{
返回child.offsetLeft>=main.scrollLeft-innerWidth/2；
});
main.scrollLeft=current.offsetLeft；
}
/*绑定和初始调用*/
main.addEventListener（'wheel'，onwheel）；
main.addEventListener（'scroll'，onscroll）；
onscroll（）
html，
身体，
主要{
身高：100%；
scoll行为：平滑；
}
身体{
填充：0；
保证金：0；
}
主要{
显示器：flex；
溢出：自动；
宽度：100%；
身高：100%；
滚动捕捉类型：x必填；
}
主要部分{
填充：1%；
宽度：100%；
高度：100vh；
弹性：0.100%；
}
.底部导航{
位置：固定；
底部：0；
左：0；
宽度：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.导航a{
宽度：1米；
高度：1米；
边缘：1米；
显示：块；
溢出：隐藏；
颜色：#888；
字号：26px；
/*颜色：透明；
边框：1px纯黑；
边界半径：50%*/
}
.底部导航a:悬停{
颜色：#fac123；
过渡：颜色。5s；
}
.底部导航a.激活{
颜色：#fac123；
过渡：颜色。5s；
}
.卡片{
高度：100vh；
}
卡德布莱克先生{
背景色：黑色；
颜色：白色；
}

第一节
第二节
第三节
您似乎可以调用与单击时调用的代码相同的代码：

setIconState（link，true）；
setIconActiveState（link，true）；

因此，您可以删除：

if（link）link.classList.add（'active'）；

这样做有用吗


const main=document.querySelector（'main'）；
const nav=document.querySelector（'.bottomnav'）；
const setIconState=（图标，状态）=>icon.className=状态？
icon.className.replace（'button-off'，'button-on'）：
icon.className.replace（'button-on'、'button-off'）
常量切换图标=元素=>{
const className=element.className；
element.className=className.indexOf（'button-on'）>-1？
setIconState（元素，false）：
setIconState（元素，true）；
}
const setIconActiveState=（图标，状态）=>icon.className=状态？
icon.className=`${icon.className}活动`:
icon.className=icon.className.replace（'active'，''）
document.querySelectorAll（'.bottomnav a.icon'）
.forEach（图标=>{
icon.onclick=（e）=>{
常数{
目标：点击span
}=e；
常量同级=[…clickedSpan.parentElement.parentElement.querySelectorAll（'a.icon'）]
.筛选器（同级）