Per personalizzare le barre di scorrimento (comunemente chiamate scrollbar) possiamo utilizzare il codice CSS per IE, css-webkit per Chrome e Safari e per gli altri browser che non supportano webkit possiamo creare delle scrollbar tramite javascript.

Ecco un esempio di scrollbars personalizzate:

Codice Sorgente

<html>
<head>
    <title>Scrollbars</title>

Il seguente codice CSS definisce le scrollbars per IE, Chrome e Safari, per Opera e Firefox creeremo delle scrollbars con le librerie jquery.

    <style>
    .container {
        width: 400px;
        height: 300px;
        margin: 20px auto;
        background-color: #DCDCDC;
        overflow: scroll;
    }

    p {
        margin: 0 0 2em 0;
    }

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

    ::-webkit-scrollbar-track {
          background-color: #666666;
    } /* colore di sfondo delle scrollbar */

    ::-webkit-scrollbar-thumb {
          background-color: #b91515;
    }

    ::-webkit-scrollbar-button {
          background-color: #7c2929;
    } /* codice per personalizzare i bottoni alle estremità delle scrollbars */

    ::-webkit-scrollbar-corner {
          background-color: black;
    } /* se sia il verticale e le barre orizzontali appaiono, probabilmente l'angolo in basso a destra ha anche bisogno di avere uno stile */    
</style>

In questo modo il codice webkit viene applicato a tutte le scrollbars, se volete applicarlo a un singolo oggetto basta mettere davanti a ” ::webkit-* “ l’ #id o la .classe dell’oggetto.

</head>
<body>
    <div>
        <p>Perchè diffondere l'open source</p>
        <p>Conosciamo importanti vantaggi che ci spingono a preferire il software libero a quello proprietario, e non li elencherò in questo articolo. Più che altro vorrei chiarire perchè è così importante contribuire diffondendo l'Open Source non solo a scopo altruistico ma anche per vantaggio personale.</p>
        <p>Perchè? Per chiarire questo concetto, prendiamo come esempio Ubuntu: senza togliere nulla agli altri sistemi operativi open source e nemmeno per essere ripetitivi ma solo perchè in media Ubuntu è ormai la distribuzioni Linux più diffusa almeno tra l'utenza media.</p>
        <p>Ubuntu, così come lo conosciamo noi, è un ottimo sistema operativo e utilizzarlo comporta parecchi vantaggi (ma non starò qui ad elencarli poichè non è di questo che voglio parlare in questo articolo). Se però mi chiedessero, a me utente di Ubuntu ormai da molto tempo, di stabilire se Ubuntu abbia difetti o meno (rispetto agli altri sistemi operativi) risponderei di si, un difetto che non è causato da qualche mancanza degli sviluppatori ne, tantomeno, da Canonical: Ubuntu, purtroppo, essendo poco diffuso rispetto ad altri sistemi operativi come Microsoft Windows non gode al 100% del supporto di alcune case produttrici di software e giochi.</p>
        <p>Certamente, grazie alle numerose alternative Open Source (che spesso risultano anche migliori dei software che "imitano") e grazie anche a Wine il problema dell'incompatibilità si riduce di molto.. Però resta comunque il fatto che, secondo me, per poter definire Ubuntu un sistema operativo perfetto dovrebbe godere di maggiore supporto da parte delle case produttrici di software/giochi.</p>
        <p>Magari alcuni si potrebbero chiedere, come mai queste case produttrici non offrono il proprio supporto per GNU/Linux (cioè realizzano solo programmi per Windows)? Certamente non lo fanno perchè GNU/Linux gli sta antipatico, ma perchè la fetta di popolazione che utilizza questo sistema operativo è troppo piccola e non gli converrebbe spendere tempo e soldi per estendere il supporto anche per GNU/Linux perchè per loro sarebbero di più le risorse da spendere rispetto agli entroiti che dovrebbero guadagnare, in parole povere il gioco non varrebbe la candela per loro.</p>
        <p>Per questo motivo a me utente di Ubuntu (sempre prendendo Ubuntu come esempio, ma questo discorso com'è facile inutire vale anche per le altre distribuzioni GNU/Linux o altri sistemi operativi e software open source) conviene eccome se oltre a me il mio sistema operativo venga utilizzato da molte altre persone, per questo motivo mi batto per diffondere Ubuntu e tutto il software Open Source che trovo interessante.</p>
    </div>

Per modificare lo stile delle scrollbars create tramite javascript basta modificare il file css importato tramite il tag

<!-- CSS, e librerie Javascript per creare delle scorllbar, (lo stile è personalizzabile dal file CSS -->
    <link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
          if (!$.browser.webkit) {
              $('.container').jScrollPane();
          }
      });
    </script>
</body>
</html>