JSFiddle - React, Tailwind, and code Playground

by Liu ChangFeng

HTML

<div class="container" style="border:solid 1px #CCC;width:200px;height:200px;overflow:auto;">
  <div>11111111111222222222222222222221111111111122222222222222222222</div>
  <div>11111111111</div>
  <div>11111111111</div>
  <div>11111111111</div>
  <div>11111111111</div>
  <div>11111111111</div>
  <div>11111111111</div>
  <div>11111111111</div>
  <div>11111111111</div>
  <div>11111111111</div>
  <div>11111111111</div>
  <div>11111111111</div>
  <div>11111111111</div>
  <div>11111111111</div>
  <div>11111111111</div>
</div>

SCSS

//滚动条整体样式
.container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

//滚动条轨道样式
.container::-webkit-scrollbar-track {
  background-color: #FFF;
}

//滚动条滑块的样式
.container::-webkit-scrollbar-thumb {
  background-color: rgba(20, 100, 100, 0.6);
  border-radius: 8px;
}

//两个滚动条交叉处的样式
.container::-webkit-scrollbar-corner {
  background-color: #F00;
}