css 设置 overflow:scroll 滚动条的样式

css 设置overflow:scroll 滚动条的样式

    <div class="echart-container div-scrollbar">
        <div class="divEcharts1" *ngIf="searchCondition.heatmap" echarts [options]="optionHeatmap"></div>
    </div>
    <ion-item-divider>
        <ion-label></ion-label>
    </ion-item-divider>
    <div class="echart-container div-scrollbar">
        <div class="divEcharts2" *ngIf="searchCondition.bar" echarts [options]="optionBar"></div>
    </div>
    <ion-item-divider>
      <ion-label></ion-label>
    </ion-item-divider>

.echart-container{
  overflow-x: scroll;
}

.div-scrollbar::-webkit-scrollbar {
  width: 2px;
  height: 3px;
}

/* 滚动条的内层滑轨背景颜色 */
.div-scrollbar::-webkit-scrollbar-track-piece {
  background-color: #fff;
}
/* 滚动条的外层滑轨背景颜色 */
.div-scrollbar::-webkit-scrollbar-track {
  background-color: #fff;
}
/* 滚动条的内层滑块颜色 */
.div-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 0px rgba(237, 237, 237, 0.5);
  background-color: rgba(211, 215, 224, 0.70);
}
/* 滑轨两头的监听按钮颜色 */
.div-scrollbar::-webkit-scrollbar-button {
  background-color: #fff;
  display: none;
}