滚动条的跨平台 css

Question

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

是否有任何资源可以帮助我度过难关。

我的一个问题是下面的水平滚动条在我的 andriod phone 上看起来非常瘦，我想在 smart phones 上有相同的 thickness/height 和颜色

这是我的例子

 <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, 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, 0, 0.1);
  border-radius: 10px;
  height: 20px; /*This do not work*/
}

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

}

JSFiddle

Answer 1

尝试把高度放在这部分代码中：

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

}

滚动条的跨平台 css

Crossplatform css for scrolls bars

html

css

scrollbar