IE and FF alternative to -webkit-scrollbar-thumb

[csdude55]

I have a few sections that require a scrollbar, but the default option is really too big and clunky... like when I use Ajax to create a drop menu.

I use this CSS, but of course it only works for Chrome... and maybe mobile? It works on Android, anyway:

.modern_bar::-webkit-scrollbar, .modern_bar::-webkit-scrollbar-button {
 width: 8px;
 height: 8px
}

.modern_bar::-webkit-scrollbar-thumb {
 background: #000;
 border: 0 none #C0C0C0;
 border-radius: 8px
}

Can you guys suggest a way to do something similar with FF and IE? I don't need for it to be super-backwards-compatible since it's strictly cosmetic, but it'd be nice if I could at least do something with the more recent browsers.

I'm using jQuery, if that helps. I've looked at some of the plugins I've found online, but they seem overly complex (and most were written in 2011 or 2012). I'm hoping you guys might know of something simpler that I can just plug n play without adding a lot of load time to the site.

[Dimitri]

I don't think it's possible to customize scroll bars on non-Webkit rendering engines.

[birdbrain]

Hi there csdude55,

do whatever you damn well like with your site's content, :)

But please, for the love of God, leave my browser alone. :(

birdbrain

[csdude55]

I don't think it's possible to customize scroll bars on non-Webkit rendering engines.

Oh well :-( I'd seen a jQuery plugin, I think it was jScroll or something like that? It seemed to work, but was very complex and had a lot of negative reviews because of the complexity.

do whatever you damn well like with your site's content, :)
But please, for the love of God, leave my browser alone. :(

Hahaha, birdbrain, I kinda expected that kind of comment :-P

I'm not manipulating the main scrollbars (remember when Frontpage used to do that?), just trying to work within certain drop menus. I have 2 specific times where it just makes sense:

1. On mobile, I have the menu navigation set to open on the left side of the window when the user clicks the "Menu" button. But it can be long enough to scroll on shorter viewports, and it's weird-looking to have a default scrollbar there... especially since they're going to be swiping and won't use the scrollbar.

2. On desktop, I have some menus that are relatively narrow but long; imagine a menu where the font is set to 10px and is 50px wide, but has 100 rows. I have it set to overflow at 100px, but the default scrollbar is 17px wide... it just looks unnecessarily big and clunky as compared to the rest of the menu.

[Dimitri]

I don't know if you already read this, and if this can help : [stackoverflow.com...]

[csdude55]

Very helpful, Dimitri, thanks!

That link also led me here:

[github.com...]

I haven't tried it yet, but with a 1kb file size it's worth testing. Today's my birthday so I'm not going to do much work today, though... I'll probably still be recovering tomorrow, so I'll test it on Sunday :-)

[birdbrain]

Hi there csdude55,

"Hahaha, birdbrain, I kinda expected that kind of comment."

Well, you really should pay more attention to your premonitions. :)

"...but the default scrollbar is 17px wide... it just looks
unnecessarily big and clunky as compared to the rest of the
menu."

If the browser of my choice displays 17px wide scrollbars, then that
is how I expect them be, period.

What your layout looks like to you is not my concern as a possible
visitor to your site.

My only concern is that whatever arty-farty nonsense you use
in your display does not interfere with my browser in any shape or
form.

Do not mess around with my browser.

birdbrain

[Dimitri]

Happy Birthday csdude55 !