ionic4-overflow-x:scroll时，显示滚动条

接上文：ionic4-div容器自适应手机屏幕高度

ionic4-overflow-x:scroll时，显示滚动条

效果：

app上容器scroll时展示滚动条.gif

实现：

1.yingli.component.html：

<ion-content style="padding: 15px;" fullscreen scroll-x="false">
    <!-- 此为滚动内容容器 -->
    <div class="echart-container div-scrollbar">
        <div class="divEcharts 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="divEcharts divEcharts2" *ngIf="searchCondition.bar" echarts [options]="optionBar"></div>
    </div>

</ion-content>

2.yingli.component.scss：

div.divEcharts{
  width: 1740px;
  background-color: #f9f8f8;
}
div.divEcharts.divEcharts1{
  //height: 300px;
  margin: 60px 0px 0px 0px;
}
div.divEcharts.divEcharts2{
  //height: 300px;
  margin: 0px 0px 0px 0px;
}
.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;
}