react如何实现滚动条

render(){
consttranslateDistancePercentage='33.33333333333333';//滚动条滚动百分比
console.log('滚动条滚动百分比'+translateDistancePercentage);
return(
//滚动条





)
}

.scrollBar{
/**滚动条宽度*/
width:362px;
height:12px;
left:0px;
top:36px;
position:absolute;
opacity:0.7;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
.scrollBarHousing{
width:100%;
height:100%;
left:0px;
top:0px;
position:absolute;
border-radius:60px;
/**下面这个很关键喔*/
overflow:hidden;
.insideScrollBar{
width:100%;
height:100%;
/**让滚动条内里一来就先位于滚动条外最左侧*/
left:-362px;
top:0px;
position:absolute;
border-radius:60px;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
}
}
}