how to make Scroll visible in firefox

Question

I Have a scrollbar which is visible in chrome , but it doesnt support firefox.Any suggestions.

<div class="item-list">
</div>

.item-list::-webkit-scrollbar {
  -webkit-appearance: none;
  -moz-appearance:none;
  width: 10px;
}

.item-list::-webkit-scrollbar-thumb {
  border-radius: 5px;
  height: 80px;
  background-color: rgba(0,0,0,.5);
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

Answer 1

edit css you have to add -moz-appearance line. You can find details look at the link below;

Sample

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars

Details

https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

.item-list {
  scrollbar-color: rgba(255,255,255,.5);
  scrollbar-width: thin;
}
.item-list::-webkit-scrollbar {
  -webkit-appearance: none;
  -moz-appearance:none;
  width: 10px;
}

.item-list::-webkit-scrollbar-thumb {
  border-radius: 5px;
  height: 80px;
  background-color: rgba(0,0,0,.5);
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

If you want to show scrollbar always you have to use min-height css

  .insider {min-height:250px; } .item-list { width: 200px; height: 200px; overflow-y: scroll; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .5) rgba(0, 0, 0, 0); } .item-list { scrollbar-color: rgba(255,255,255,.5); scrollbar-width: thin; } .item-list::-webkit-scrollbar { -webkit-appearance: none; -moz-appearance:none; width: 10px; } .item-list::-webkit-scrollbar-thumb { border-radius: 5px; height: 80px; background-color: rgba(0,0,0,.5); -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); } 

 <div class="item-list"> <div class="insider"> </div> </div> 

Answer 2

This stackoverflow post seems to indicate that Firefox 64 offers limited support for styling scrollbars; which attempts to meet with defined W3C standards outlined here CSS Scrollbars Module Level 1 .

This "adds two new properties of scrollbar-width and scrollbar-color which give some control over how scrollbars are displayed."

I attempt to give you an example below in this fiddle,

 body { overflow: hidden; } .item-list { width: 200px; height: 200px; background-color: red; overflow: scroll; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .5) rgba(0, 0, 0, 0); } .content { height: 1000px; } .item-list::-webkit-scrollbar { -webkit-appearance: none; -moz-appearance: none; width: 10px; } .item-list::-webkit-scrollbar-thumb { border-radius: 5px; height: 80px; background-color: rgba(0, 0, 0, .5); -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5); } 

 <div class="item-list"> <div class="content"> </div> </div>