Scrollbar not working in mozilla

Question

.about {
    word-break: break-all;
    width: 100%;
    font-size: 18px;
    overflow-y: auto;
    max-height: 160px;
}

.custom-scroll-style::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}
.custom-scroll-style::-webkit-scrollbar {
 width: 10px;
 background-color: #F5F5F5;
}
.custom-scroll-style::-webkit-scrollbar-thumb {
 background-color: #ff253f;
 border: 2px solid #fff;
}

<div class="custom-scroll-style about">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>

I want to use pure css scrollbar in Mozilla and chrome but here is some issue with Mozilla. this is only work on chrome. How to resolve this problem?

I share my code please check and let me know how to fixed it in Firefox and all browser without using JS and Jquery — Sawan mishra, Feb 07 '17 at 10:05

score 3 · Answer 1 · edited May 23 '17 at 12:09

3

The ::-webkit-scrollbar-* pseudo classes will only work in webkit (hence the vendor-specific prefix). Sadly, there is no equivalent for Gecko browsers, so you'll have to fall back to a JavaScript solution.

See also this question (essentially a duplicate): Custom CSS Scrollbar for Firefox

edited May 23 '17 at 12:09

Community

1
1

answered Feb 07 '17 at 10:20

Constantin Groß

10,719
4
24
50

score 0 · Answer 2 · answered Aug 23 '20 at 20:44

How I fixed scrollbar in Mozilla Firefox and Edge and Chrome. I am using React but you can do it without it.

I hope I can help or share tips/hint with someone.

What am I doing?

I am designing chat and I want to a user to scroll down and up to view messages.

Markup/JSX format

<div className="chat-component-parent-style">
   ...
</div>

Style

CSS style I used for Mozilla firefox

   .chat-component-parent-style {
       position: absolute; // position: fixed works
       height: 533px;  // very important
       width: 35%;
       overflow-y: scroll;   // add scroll behavior
       overscroll-behavior-y: contain;  // firefox need to understand the behavior
   }

CSS style I used for Microsoft Edge and Google Chrome

    .chat-component-parent-style::-webkit-scrollbar {
      width: 0.5em;
    }

    .chat-component-parent-style::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    }

    .chat-component-parent-style::-webkit-scrollbar-thumb {
      background-color: darkgrey;
      outline: 1px solid slategrey;
    }

You can use the same CSS style to the body of content.

If not working?

If you don't see the effect try to remove these kinds of style

  * {
     scrollbar-color: transparent transparent;  // in firefox the scroll was transparent so I could not see it.
   }

References

https://mdn.github.io/css-examples/overscroll-behavior/

https://github.com/mdn/css-examples/tree/master/overscroll-behavior

Scrollbar not working in mozilla

2 Answers2

What am I doing?

If not working?

References