changing a web browsers default scroll bar advice

Question

So, I want to change my browsers scroll bar to something a little nicer looking like the scrollbar that www.twitch.tv uses.

But then I noticed that not many other websites change their scrollbars. Is there a reason for this?

Is it best to leave these as default?

Answer 1

Well, even if this is kinda off topic, I feel like answering it anyway.

The main trouble with the default scroolbar is the browser compatibility, if you code it yourself you will never get a one-script-for-all solution, you will have to code another line for almost each browser out there and it's not easy, especially if you want it to work on relic versions of grandpa IE...

BUT, lucky for you, others have already thought about that and put together solutions for most of the browsers out there and as of version 3 I see they got down to IE6 as well.

I present to you, jQuery Nicescroll 3.

I have played with it in the past and it works nicely, it also has a smooth scroll feature and the colors, thickness, rail and more of the scrollbar features are customizable. It works on both desktop and mobile and it's VERY simple to install.

Best of luck !

Answer 2

I've done a couple of nice scrollbars before because I wanted the design to transition into the scrollbar since I didn't like how it looked bulky with the theme of the site. Another site design I had it to go along with the color palette and one because I could control the thickness of the scrollbar since the site was estimated to be viewed on mobile devices. So in reality this is up to you and it isn't really necessary and depends on your design.

To do this, per a search:

Scrollbar Colorz How to change the scrollbar color using css:

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

and the fiddle.

From a search also show CSS Tricks: scrollbar:

body::-webkit-scrollbar {
    width: 1em;
}

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

body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

I have used jquery.nicescroll in the past and you can initialize the width and color with the following:

$("#thisdiv").niceScroll({
    cursorcolor: "#424242", // change cursor color in hex
    cursorwidth: "5px", // cursor width in pixel (you can also write "5px")
});

Also reference, CSS customized scroll bar in div

Answer 3

One big reason this isn’t done is that the trend is towards invisible scroll bars. If you go through every category of computing device (phone, tablet, small notebook, pro notebook, desktop, etc.) the #1 device in every category has invisible scroll bars for years now.

Also there are a lot of graphics tasks that you can do to improve a website today that are a better use of time and energy. For example, making sure your site is Retina-compatible and responsive from 3.5 inch phones up to 50 inch 4KTV. There are lots of SVG’s and hi-dpi bitmaps to create. So styling scroll bars is way, way down the list for most of us.

Answer 4

A big part of why it isn't done is because it isn't easy to implement consistently cross browser. There are solutions, as others pointed out (on GD.SE).

However, I personally think it is a very bad design decision for UX.

The scroll bar is part of the browser, not the content. This is why it is hard to implement a cross browser solution, because all browsers are different. If a website changed the color of my browsers UI, or decided to move the address bar to the bottom of the window, the first thing I would do is close my browser and probably never visit that site again. Obviously thats an extreme example but it makes my point - the scroll bars are part of the browser, not your website. Scroll bars are different across browsers, OS's and devices, and that's what users expect. Unless there's a solid design reason to do it, don't change that expectation.

That being said, there may be good reasons for implementing a custom scroll bar. There may be a small subsection of a page that scrolls that needs attention brought to the fact that it scrolls, that could be done with a custom scroll bar. A web app that, although being used in a browser, more resembles software UI may benefit from custom scroll bars.

But in short, without a solid design reason for doing so - don't do it.

Answer 5

DON'T CHANGE THE DEFAULT SCROLLBAR.

Just look at Chrome for Windows; it's so thin you have to really slow down to catch it with your mouse before you can start scrolling. Google should have known better.

My point is, if you're just changing the colours of the scrollbar, then fine. But if you're going to change the width of the scrollbars, your website's going on my blacklist.