0

How I can show my scroll bar over the div content in the mozaila firefox, I am able to achieve the same functionality in the chrome, this is how it looks in chrome and chrome output is also the desired output.

ChromeScrollBar:

enter image description here

but in the firefox I am not able to achieve the same functionality. Is there any to way to achieve it, FireFox result is shown below.

FireFoxScrollBar:

enter image description here

//App.js
import './App.css';

function App() {
  return (
    <div class="main">
    <div class="my-custom">
      working in crome
    </div>
    <div class="my-custom">
      working in crome
    </div>
    <div class="my-custom">
      working in crome
    </div>
    <div class="my-custom">
      working in crome
    </div>
    <div class="my-custom">
      working in crome
    </div>
    <div class="my-custom">
      working in crome
    </div>
    <div class="my-custom">
      working in crome
    </div>
    <div class="my-custom">
      working in crome
    </div>
    <div class="my-custom">
      working in crome
    </div>
    <div class="my-custom">
      working in crome
    </div>
    <div class="my-custom">
      working in crome
    </div>
    <div class="my-custom">
      working in crome
    </div>
    <div class="my-custom">
      working in crome
    </div>
    <div class="my-custom">
      working in crome
    </div>
    <div class="my-custom">
      working in crome
    </div>
    <div class="my-custom">
      working in crome
    </div>
  </div>
  );
}

export default App;

//App.css
.main::-webkit-scrollbar {
  width: 7px;
}
.main::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10rem;
  border: 1px solid #fff;
}

.main::-webkit-scrollbar-track-piece:start {
  background: transparent;
}

.main::-webkit-scrollbar-track-piece:end {
  background: transparent;
}
.main {
  width: 250px;
  height: 400px;
  background: #fff;
  border: 1px solid #7b7d7f;
  overflow: overlay;
}

.my-custom {
  padding: 20px;
  border-bottom: 1px solid #000;
  line-height: 1.3;
  color: #15191b;
  font-size: 0.8rem;
}
.my-custom:hover {
  background-color: grey;
}

Looking for a solution how to achieve the same functional scrollBar in the FirFox.

If anyone can give solution using jquery that also be very helpful.

Rambo check
  • 33
  • 1
  • 6

2 Answers2

0

It seems, that a solution by css in firefox is yet not possible because firefox does not support it:

https://caniuse.com/?search=scrollbar-thumb

See also here in Stackverflow:
Custom CSS Scrollbar for Firefox

But if you have a closer look to the second link it seems there is an aproach by doing it in javascript. Maybe you like to check it.

Brebber
  • 2,986
  • 2
  • 9
  • 19
0

FireFox doesn't support custom scrollbars (with css). As mozilla mentioned here: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user.

You can use SimpleBar that works great.

S.s.
  • 33
  • 2
  • 10