Make Scrollbar viable for Firefox

Question

I would like to make my css scrollbar of a div visible for Firefox. I can see that it doesn't work on firefox but it is working on chrome. Here is my css.

.ascenseur::-webkit-scrollbar
{
    width: 4px;
}
.ascenseur::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    background-color: #7997cd;
}

Answer 1

I could be mistaken but I believe currently the only CSS that mozilla supports for scrollbar styling is:

scrollbar-color: red green; (where red is the bar and green is thumb)
scrollbar-width: thin; (other option is thick)

There are some javascript scrollbar options that can be use to style Mozilla scrollers but I don't have much experience with them.

what you could do is something like:

@-moz-document url-prefix('') {
  .ascenseur {
    scrollbar-color: #7997cd green; (pick something not green)
    scrollbar-width: thin;
}

This would apply the alternative style to mozilla (firefox) only and allow other browsers to use your original style.

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