Блог

Я очень расстраиваюсь из-за того, что не могу создать простую полосу прокрутки, которая имеет простой цвет и толщину, и отображать ее в разных браузерах и смартфонах. Устройства.

Есть ли какие-либо ресурсы, которые могут помочь мне пройти через это.

Одна из моих проблем заключается в том, что горизонтальная полоса прокрутки ниже выглядит очень тонкой на моем телефоне andriod, и я хотел бы иметь такую же толщину / высоту и цвета на смартфонах

Вот мой пример

  <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

попробуйте указать высоту в этой части кода:

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

}