How to make a Custom Scrollbar?

Asked

Viewed 18,042 times

21

How to modify a scrollbar div, to appear as in the image example below (Hangouts), instead of the standard operating system scrollbar?

barra de rolagem

javascript jquery css html5

6 answers

12

Pure CSS. But only works on Webkit browsers like Google Chrome, Safari and Opera. Use it like 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: http://jsfiddle.net/N5jC6/

See other scroll bar styles here: http://cssdeck.com/labs/css3-webkit-vertical-scrollbars/

  • 2

    The Chrome and Opera browsers currently use Blink, not Webkit as it was before, but Blink because it is a kind of "Fork" of the Webkit project, still supports most of the Webkit Features, which included the solution of this answer.

  • 1

    Interestingly, something that existed ten years ago in IE6 begins to be standardized by w3c. Corrects your answer, IE also supports see http://msdn.microsoft.com/en-us/library/ie/ms531155(v=vs.85). aspx

  • great answer!

10


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

In a relationship of plugins, I analyzed some that looked more promising in 3 browsers (Chrome, IE 7 and Firefox) and 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 Nano, but also behaved well in all tests.
  • The scrolling has some effect to get smoother but personally I did not like this detail.
  • 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 (touch), but I did not include in the test due to lack of hardware.

  • 3

    A very important aspect is the support for touch (touch), you can add that feedback to complete the answer.

  • @Zuul Well remembered! Thank you.

  • @utluiz why don’t you test in the Chrome simulator?

  • 1

    @Andreyhartung The reason is that he did not trust simulators to give the final word on this. I don’t know how reliable they are now, but at least that’s how it was at the time I answered the question.

3

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

$(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 (i.e. CSS-only, no external Javascript libraries), see that 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 of this type supported by Firefox.

  • Yeah, it seems like it’s not trivial to do without plugins. It’s responsive?

  • @Calebeoliveira Try the demos on the plugin website. It seems very efficient, but I imagine that it depends a little on the browser used and/ or the capabilities of the computer/ device.

1

0

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

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

0

This css code works well:

::-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!

Browser other questions tagged javascript jquery css html5

You are not signed in. Login or sign up in order to post.