Javascript Don'；t单击按钮时调用滚动事件处理程序代码

我有一个按钮和div的列表。每个按钮都与每个div相关联。现在，当我单击一个按钮时，它会将div带到视口中，该按钮被激活（更改背景色）。当我滚动时，根据视口中的div，激活的按钮会改变

问题是，当我随机单击一个远离上一个按钮的按钮时，它会将div带到滚动视图中，但您也会看到所有中间按钮的背景色都发生了变化。我想当按钮被点击时，所有中间按钮的背景不应该改变

我不知道如何才能做到这一点。 下面是一个模拟问题的代码沙盒：

为了完成，我也在这里添加代码

const{useffect，useState，StrictMode}=React；
函数App（）{
常量项=[1,2,3,4,5]；
const[currentItem，setCurrentItem]=useState（1）；
恒把手（e）=>{
const id=parseInt（e.target.id，10）；
setCurrentItem（id）；
document.querySelector（`[data id=“${id}]”`）；
};
useffect（（）=>{
const scrollEvent=window.addEventListener（“滚动”（（）=>{
var元素=document.queryselectoral（“.item div”）；
elements.forEach（（element）=>{
var position=element.getBoundingClientRect（）；
//检查是否完全可见
如果（position.top=0）{
const previousElement=document.querySelector（“.active”）；
previousElement.classList.remove（“活动”）；
const current=document.getElementById（element.dataset.id）；
当前.classList.add（“活动”）；
setCurrentItem（parseInt（element.dataset.id，0））；
}
});
});
return（）=>{
removeEventListener（“滚动”，scrollEvent）；
};
}, []);
返回(
{items.map（（item）=>(
把手（e）}
className={item==currentItem？“活动”：“}
>
{item}
))}
{items.map（（item）=>(
{item}
))}
);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render(
,
根元素
);
*{
滚动行为：平滑；
}
.App{
字体系列：无衬线；
文本对齐：居中；
}
.项目btn{
显示器：flex；
证明内容：周围的空间；
背景：#eee；
填充：20px；
顶部：0px；
位置：粘性；
}
.项目btn按钮{
高度：50px；
宽度：50px；
字体大小：16px；
填充：10px；
背景：无；
边框：2倍实心海绿；
光标：指针；
}
.项目btn按钮：悬停，
.项目btn按钮。激活{
背景色：海绿；
}
.物料分类{
高度：300px；
宽度：100%；
边框：1px纯水；
边缘顶部：50px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
字体大小：25px；
颜色：红色；
字体大小：粗体；
}

反应应用程序
您需要启用JavaScript才能运行此应用程序。