Custom CSS Scrollbar for Firefox

I want to custom-style a scrollbar with CSS.

I use this WebKit CSS code, which works well for Safari and Chrome:

::-webkit-scrollbar {
width: 15px;
height: 15px;
}


::-webkit-scrollbar-track-piece  {
background-color: #C2D2E4;
}

::-webkit-scrollbar-thumb:vertical {
height: 30px;
background-color: #0A4C95;
}

How can I do the same thing for Firefox?

(I know I can easily do it using jQuery, but I would prefer to do it with CSS if it's doable.)

Would be grateful for somebody's expert advice!

---

There's no Firefox equivalent to ::-webkit-scrollbar and friends.

You'll have to stick with JavaScript.

Plenty of people would like this feature, see: https://bugzilla.mozilla.org/show_bug.cgi?id=77790

This report is asking for the exact same thing you're asking for: https://bugzilla.mozilla.org/show_bug.cgi?id=547260

It was closed as a duplicate of the first report I linked to.

---

As far as JavaScript replacements go, you can try:

https://github.com/noraesae/perfect-scrollbar

https://github.com/jnicol/trackpad-scroll-emulator

https://github.com/vitch/jScrollPane (but it's outdated and apparently a PITA...)

---

I thought I would share my findings in case someone is considering a JQuery plugin to do the job.

I gave JQuery Custom Scrollbar a go. It's pretty fancy and does some smooth scrolling (with scrolling inertia) and has loads of parameters you can tweak, but it ended up being a bit too CPU intensive for me (and it adds a fair amount to the DOM).

Now I'm giving Perfect Scrollbar a go. It's simple and lightweight (6KB) and it's doing a decent job so far. It's not CPU intensive at all (as far as I can tell) and adds very little to your DOM. It's only got a couple of parameters to tweak (wheelSpeed and wheelPropagation), but it's all I need and it handles updates to the scrolling content nicely (such as loading images).

PS I did have a quick look at JScrollPane, but @simone is right, it's a bit dated now and a PITA.

---

May I offer an alternative?

No scripting whatsoever, only standardized css styles and a little bit of creativity. Short answer - masking parts of the existing browser scrollbar, which means you retain all of it's functionality.

.scroll_content {
    position: relative;
    width: 400px;
    height: 414px;
    top: -17px;
    padding: 20px 10px 20px 10px;
    overflow-y: auto;
}

For demo and a little bit more in-depth explanation, check here...

jsfiddle.net/aj7bxtjz/1/

链接地址: http://www.djcxy.com/p/41614.html

上一篇: Html在悬停上选择框选项？

下一篇: 用于Firefox的自定义CSS滚动条