1

I want a custome scrollbar for my website, I found this for chrome, but not for firefox. I dont want to use heavy jQuery plugins, Is that possible to do this with css only? CSS I found for Chrome:

::-webkit-scrollbar {
        width: 12px;
    }

    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
        border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    }
Preeti Gupta
  • 17
  • 2
  • 1
    Possible duplicate of [Custom CSS Scrollbar for Firefox](http://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox) – André Laszlo Mar 03 '16 at 12:54

4 Answers4

0

Not possible through CSS in Firefox (and most other browsers). However there's the possibility to style scrollbars in XUL apps (add-ons for Firefox, for instance).

Amarok24
  • 94
  • 1
  • 9
0

Firefox does not support this feature anymore. Check this bug report:

https://bugzilla.mozilla.org/show_bug.cgi?id=547260

goncalopinto
  • 433
  • 2
  • 8
0

Through css if somehow you reach for firefox then IE and safari also going to create issue.better use jquery plugin for scroll bar

VISHAL SINGH
  • 651
  • 1
  • 8
  • 20
0

Since Firefox version 64 you can use the following two css properties to provide style and color to the scrollbar.

scrollbar-width scrollbar-color

.scrollable {
    scrollbar-width: thin;
    scrollbar-color: #3487ab #efefef;
}

.scrollable {
  background-color: #a3d5d3;
  height: 100%;
  overflow-y: auto;
  width: 240px;
  height: 120px;
}
  <div class="scrollable">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
    <div>Item 7</div>
    <div>Item 8</div>
    <div>Item 9</div>
  </div>
Alejandro Lasebnik
  • 816
  • 8
  • 10