I'm feeling extremely frustrated right now because I can't seem to create a basic scroll bar with a specific color and thickness that will display properly on various web browsers and smartphones.
Are there any resources available to help me figure this out?
One of my main issues is that the horizontal scroll bar appears too thin on my Android phone, and I want it to have the same thickness and color on all smartphones.
Here's an example of what I'm dealing with:
<div class="chartWrapper">
<div class="chartAreaWrapper scroll-color-colors" id="chartAreaWrapper">
<div style="width:1000px; height 450px">
scrollable content
</div>
</div>
</div>
CSS code:
@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;
}
}