CSS3自定义滚动条样式

效果图：

HTML:

<div class="box">
    <div class="transcrided_text"></div>
</div>

CSS:

.transcrided_text {
  margin: 0 0.5rem;
  font-size: 0.14rem;
  padding-bottom: 0.2rem;
  height: 1.62rem;
  overflow-y: scroll;
}

/*主要部分 -- 自定义样式*/
/*滚动条整体样式*/
.transcrided_text::-webkit-scrollbar {
  width: 6px;
  height: 1px;
}
/*滚动条滑块*/
.transcrided_text::-webkit-scrollbar-thumb {
  border-radius: 6px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #BEBEBE;
}
/*滚动条轨道*/
.transcrided_text::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
  border-radius: 6px;
  background: #EDEDED;
}

兼容性：

chrome可以显示；火狐、ie会变成默认样式。360用的chrome的内核，360也可以使用。