JSFiddle - React, Tailwind, and code Playground
HTML
<div class="scrollBox">
<div class="viewport">
<div class="overview">
Lorem Ipsum Dolor. Lorem Ipsum Dolor Lorem Ipsum Dolor. Lorem Ipsum Dolor. Lorem Ipsum Dolor. Lorem Ipsum Dolor.
Lorem Ipsum Dolor. Lorem Ipsum Dolor Lorem Ipsum Dolor. Lorem Ipsum Dolor. Lorem Ipsum Dolor. Lorem Ipsum Dolor.
Lorem Ipsum Dolor. Lorem Ipsum Dolor Lorem Ipsum Dolor. Lorem Ipsum Dolor. Lorem Ipsum Dolor. Lorem Ipsum Dolor.
Lorem Ipsum Dolor. Lorem Ipsum Dolor Lorem Ipsum Dolor. Lorem Ipsum Dolor. Lorem Ipsum Dolor. Lorem Ipsum Dolor.
Lorem Ipsum Dolor. Lorem Ipsum Dolor Lorem Ipsum Dolor. Lorem Ipsum Dolor. Lorem Ipsum Dolor. Lorem Ipsum Dolor.
Lorem Ipsum Dolor. Lorem Ipsum Dolor Lorem Ipsum Dolor. Lorem Ipsum Dolor. Lorem Ipsum Dolor. Lorem Ipsum Dolor.
Lorem Ipsum Dolor. Lorem Ipsum Dolor Lorem Ipsum Dolor. Lorem Ipsum Dolor. Lorem Ipsum Dolor. Lorem Ipsum Dolor.
Lorem Ipsum Dolor. Lorem Ipsum Dolor Lorem Ipsum Dolor. Lorem Ipsum Dolor. Lorem Ipsum Dolor. Lorem Ipsum Dolor.
</div>
</div>
<div class="scrollbar">
<div class="thumb"></div>
</div>
</div>
CSS
.scrollBox {
position: relative;
display: flex;
overflow: hidden; }
.scrollBox .viewport {
height: 100%;
position: relative;
width: 100%;
overflow-x:scroll;
overflow-y: hidden; }
.scrollBox .overview {
position: absolute;
/*width: 100%;*/
width:auto;
height:100%;
transition: all 0.5s;
white-space:nowrap;
}
.scrollBox .scrollbar {
width: 10px;
border: 1px solid #E6E6E6;
border-radius: 15px;
box-sizing: border-box;
position: relative;
cursor: pointer; }
.scrollBox .scrollbar.disable {
display: none; }
.scrollBox .thumb:hover,
.scrollBox .thumb:active {
background-color: #0059B3; }
.scrollBox .thumb {
width: 8px;
left: 0;
top: 0;
background-color: #999999;
border-radius: 15px;
cursor: pointer;
position: absolute;
transition: all 0.5s; }
.scrollBox {
width:200px;
height:100px;
}
.scrollbar{
display:none
}
.scrollBox .overview {
white-space:nowrap;
}