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);
}

tugib · Answer 1 · 2019-03-19T13:10:13.127

0

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>

edited Mar 19 '19 at 13:10

answered Mar 19 '19 at 10:43

tugib

1
3

look at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars – tugib Mar 19 '19 at 10:58
you are not getting my point, I want scrollbar to be always visible not this way – Nicoleta Wilskon Mar 19 '19 at 11:37
Can u send .item-list css codes? Do u use overflow-y:scroll & min-height ? – tugib Mar 19 '19 at 11:45
.item-list { width: 200px; height: 200px; overflow-y: scroll; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .5) rgba(0, 0, 0, 0); } – Nicoleta Wilskon Mar 19 '19 at 12:09
use another div inside item-list sample;
and use this css for that class .insider {min-height:250px; } I added sample code to answer you can try. – tugib Mar 19 '19 at 13:06

score 0 · Answer 2 · answered Mar 19 '19 at 11:38

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>

I notice that I have essentially provided you with the same answer as @tugib. My apologies. I simply wanted to attempt to provide more context. — fishycrakers, Mar 19 '19 at 11:42
I tried same , still it doesnt support in firefox. I want only overflow-y — Nicoleta Wilskon, Mar 19 '19 at 12:20
inafune - I used same codes in my code and run it , it still doesn't worked out in firefox — Nicoleta Wilskon, Mar 19 '19 at 12:31

how to make Scroll visible in firefox

2 Answers2