滚动条的跨平台CSS

问题描述

我在这里感到非常沮丧，无法设计具有简单颜色和厚度的简单滚动条，并无法在不同的浏览器和智能手机设备上显示该滚动条。

有什么资源可以帮助我解决这个问题。

我的问题之一是，下面的水平滚动条在我的安卓手机上看起来非常瘦，我希望在智能手机上具有相同的厚度/高度和颜色

这是我的例子

 <div class="chartWrapper">
        <div class="chartAreaWrapper scroll-color-colors" id="chartAreaWrapper">
                   <div style="width:1000px; height 450px">
                   scrollable content
                   </div>
                </div>
            </div>

css代码

@media (max-width: 1600px) {
.chartWrapper {
  position: relative;
  height: 430px;
}

.chart {
  width: 700px;
  left: 0;
  top: 0;
}

.chartAreaWrapper {
  max-width: 1100px;
  height: 420px;
  overflow-x: scroll; 
  overflow-y: hidden;
  overflow: scroll;  
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0,0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}

::-webkit-scrollbar {
  background-color: #f5f5f5;
  cursor: pointer;
  width:40px; /*This Works*/
}

::-webkit-scrollbar-thumb:horizontal {
  background-color: #a7cb11;
  box-shadow: inset 0 0 6px rgba(0,0.1);
  border-radius: 10px;
  height: 20px; /*This do not work*/
}

.scroll-color-colors {
  scrollbar-color: #a7cb11 white;
}

}

JSFiddle

解决方法

尝试将高度放在代码的这一部分：

::-webkit-scrollbar {
  background-color: #f5f5f5;
  cursor: pointer;
  width:40px; /*This Works*/
  height: 20px; /*This PROBABLY work*/

}