How to make a custom ScrollBar?

There are literally dozens of scrolling plugins , so the best solution is to find one that fits your needs rather than reinventing the wheel, as this is not a trivial task.

In a plugins relationship, I analyzed some that looked more promising in 3 browsers (Chrome, IE 7 and Firefox) and I selected two:

Nano Scroller

• Clean , compact, fast and functional.
• Supporting scrolling with the mouse.
• Behaved well in all 3 browsers.

Nice Scroll

• Visual a little simpler than the Nano, but also behaved well in all tests.
• Scrolling has some effect to make it smoother, but I personally did not like that detail.
• It has an option to maximize the element in "full screen" (adjust to page size), but I do not think it is very usual.

Note : Both support touch devices, but I did not include it in the test due to lack of hardware. >     

Pure CSS. But it only works on Webkit browsers, like Google Chrome, Safari and Opera. Use this:

/* Largura da barra de rolagem */
::-webkit-scrollbar {
    width: 10px;
}

/* Fundo da barra de rolagem */
::-webkit-scrollbar-track-piece {
    background-color: #EEE;
    border-left: 1px solid #CCC
}

/* Cor do indicador de rolagem */
::-webkit-scrollbar-thumb:vertical,
::-webkit-scrollbar-thumb:horizontal {
    background-color: #BAC0C4
}

/* Cor do indicador de rolagem - ao passar o mouse */
::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-thumb:horizontal:hover {
    background-color: #717171
}

Fiddle: link

See other scrollbar styles here: link

I suggest pluigin jScrollPane for jQuery, it offers a variety of ways to customize the scroll bar consistently between the different browsers . Example usage:

$(suaDiv).jScrollPane();

$(suaDiv).jScrollPane({
    showArrows:true,           // Mostrar setas? (as que se clica para rolar em "steps")
    arrowScrollOnHover: true,  // Rolar ao passar o mouse sobre a seta?
    verticalGutter: 30         // Espaço extra antes e depois da barra
    verticalDragMinHeight: 20, // Tamanho do "retângulo" (o que se arrasta pra rolar)
    verticalDragMaxHeight: 20
    ...
});

If you prefer a native solution (ie only CSS, without external JavaScript libraries), see this answer in the English OS for a list of ways to do this in Internet Explorer or Webkit (Chrome, Safari). Unfortunately, at the moment there is nothing like that supported by Firefox.

I use the jQuery custom content scroller plugin

Very good plugin and easy configuration in your layout.

I use Nano Scroller , even contributing to it in the Github project repository, I find it an interesting plugin if you need a solution.

However, if I can work with Progressive Enhancement, I suggest changing the toolbar through CSS, which works only in Webkit browsers, as reported by @utluiz.

This css code works fine:

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track:enabled { background-color: #FFF; }
::-webkit-scrollbar-thumb:vertical { background-color: #FF0000; }
::-webkit-scrollbar-thumb:horizontal { background-color: #FF0000; }

Good luck!