Javascript 带有更改颜色按钮的可滚动滑块

我有一个滑动条，带有可滚动的物品容器和三个按钮。按钮需要根据滚动位置更改其颜色。例如，当scroll在第一个元素上时，第一个按钮为蓝色（渲染后第一个按钮也需要为蓝色），其他按钮为灰色，当scroll在第二个元素上时，第二个按钮为蓝色，其他按钮为灰色等。如何将颜色更改为按钮，屏幕上显示的是哪个元素

import React，{useState}来自“React”；
常量滑块=（）：JSX.Element=>{
const[isActiveBtn，setActiveBtn]=useState（true）；
返回(
{
if（event.currentTarget.scrollLeft<（event.currentTarget.scrollWidth-window.innerWidth）/3）{
控制台日志（“第一次按钮更改”）；
返回；
}
如果（event.currentTarget.scrollLeft<（（event.currentTarget.scrollWidth-window.innerWidth）/3）*2）{
控制台日志（“第二次按钮更改”）；
返回；
}
控制台日志（“第三个按钮更改”）；
}}>
标题
描述
标题
描述
标题
描述
);
};
.wrapper{
显示器：flex；
弯曲方向：立柱；
宽度：100%；
}
.wrapper.items容器{
边缘底部：10px；
显示器：flex；
证明内容：之间的空间；
溢出-x：滚动；
}
.wrapper.items容器.item{
宽度：500px；
}
.wrapper.items容器.item\u标题{
字号：18px；
}
.wrapper.items容器.item\u说明{
边缘顶部：7px；
字体大小：15px；
}
.包装袋.纽扣{
宽度：100%；
显示器：flex；
证明内容：中心；
}
.包装袋.按钮.按钮{
高度：10px；
宽度：10px；
利润率：0.4px；
背景颜色：灰色；
}
.wrapper.buttons.button\u激活{
背景颜色：蓝色；
}