Custom CSS scroll bar only work on chrome

Question

I have been working on a project that involves custom scroll bar here is the code

.scrollbar
{
  margin-left: 30px;
  float: left;
  height: 300px;
  width: 65px;
  background: #F5F5F5;
  overflow-y: scroll;
  margin-bottom: 25px;
}

.force-overflow
{
  min-height: 450px;
}


#style-2::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar
{
  width: 12px;
  background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #D62929;
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<body id="main">
    <div class="scrollbar" id="style-2">
      <div class="force-overflow"></div>
    </div>
 </body>

the problem is it is only working on chrome how can i make it work on every browser. i have searched all over the internet but still cannot fine any reliable solution.thanks in advance

http://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox — Vcasso, Jul 14 '16 at 18:47
Possible duplicate of [CSS customized scroll bar in div](http://stackoverflow.com/questions/9251354/css-customized-scroll-bar-in-div) — Adam Buchanan Smith, Jul 14 '16 at 19:31

score 0 · Accepted Answer · answered Jul 14 '16 at 19:08

0

Sorry friend firfox, Opera Mini & Edge not supported scrollbarstyle
YOU can check it here check it

answered Jul 14 '16 at 19:08

MD Ashik

9,117
10
52
59

You are most welcome. It was my first achievement of stack overflow. :) – MD Ashik Jul 15 '16 at 23:26

score 0 · Answer 2 · answered Jul 14 '16 at 19:09

0

-WebKit- applies to Chrome and safari, not sure if other browsers support custom scroll bars but I think they don't

answered Jul 14 '16 at 19:09

edvilme

570
7
16

Custom CSS scroll bar only work on chrome

2 Answers2