如何根据容器的宽度显示和隐藏滑动图标（左和右）-Javascript/ReactJs

我正在使用左键和右键在div元素上进行水平滚动

document.getElementById（'left-button'）。onclick=function（）{
scrollLeft（document.getElementById（'content'），-3001000）；
}
document.getElementById（'right-button'）。onclick=function（）{
scrollLeft（document.getElementById（'content'），3001000）；
}
功能向左滚动（元素、更改、持续时间）{
var start=element.scrollLeft，
currentTime=0，
增量=20；
console.log（启动）
var animateScroll=函数（）{
当前时间+=增量；
var val=Math.easeInOutQuad（当前时间、开始、更改、持续时间）；
element.scrollLeft=val；
如果（当前时间<持续时间）{
设置超时（动画滚动，增量）；
}
};
动画滚动（）；
}
Math.easeInOutQuad=函数（t，b，c，d）{
t/=d/2；
如果（t<1）返回c/2*t*t+b；
t--；
返回-c/2*（t*（t-2）-1）+b；
};
。左{
浮动：左；
宽度：10%；
}
.内部{
宽度：31.75%；
身高：100%；
边框：1px纯黑；
显示：内联块；
}
.中心{
浮动：左；
宽度：计算（100%-100px）；
高度：200px；
保证金：1px；
溢出：隐藏；
空白：nowrap；
}
.对{
浮动：对；
宽度：10%；
}

左击
第一组
第8组
向右滑动