Vind je die scrollbar die hoort bij jouw favoriete browser ook zo lelijk? Op de Mac vind ik het eigenlijk wel meevallen, maar dat windows-ding…

Eerder wijdde ik al een artikel aan custom checkboxes. Onlangs kreeg ik de opdracht om me te verdiepen in een custom scrollbar, want het design moet er in alle browsers hetzelfde uitzien. De demo en download knopjes:

Ik heb het uitgezocht en ga het hieronder uitgebreid met je delen. In het kort werkt de custom checkbox als volgt: Maak de content die gescrolled gaat worden aan. Stop dit in een iets smallere div (met een overflow hidden) en bouw vervolgens met javascript een custom scrollbar die ‘luistert’ naar bewegingen met de muis. NB: het zou teveel eer zijn om dit idee zelf te claimen. Ik heb het origineel hiervandaan. Maar aangezien het me vervolgens nog een hele ochtend kostte om het werkend te krijgen hoop ik dat je met mijn voorbeeld sneller ready-to-go bent.

Goed, we starten dus met een basis html pagina. Dat is dus een html document met head en body tags voorzien van de noodzakelijke meta tags etc. Dan bouw je de content voor je custom scrollbar op. In mijn voorbeeld zit dat in een unordered list (ul). Daaromheen zet je dan vervolgens 4 (ja vier!) geneste divs zoals je hieronder ook kunt zien:

<div id="outer">
    <span id="scrollbar-kop">Jouw kop hier</span>
    <div class="custom_scroll_bar retained">
        <div class="native">
            <div class="content">
                <ul id="dropdown-scroll-ul">
                    <li>item 1</li>
                    <li>item 2</li>
                    <li>item 3</li>
                    <li>item 4</li>
                    ...
                </ul>
            </div>
        </div>
    </div>
</div>

Tenslotte voeg je nog een blackbox javascript functie toe om de bewegingen van de muis op te vangen en af te handelen. De scrollbar zelf wordt ook in dit stukje javascript gedefinieerd en aan de bovenstaande HTML toegevoegd. Vergeet ook jQuery niet in te laden, en let wel, voor het andere script anders werkt het niet (Ik heb hier een lokale copy van jQuery gebruikt. Voor de performance is het het beste om de jQuery in te laden die in de Google libraries zit).

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="pad-naar-de-js-file.js"></script>

Als het goed is heb je in de head sectie de CSS gelinked zodat jouw eigen gemaakte custom scrollbar er mooi en goedwerkend uitziet. Je kunt natuurlijk de custom scrollbar nog helemaal aanpassen naar jouw eigen behoefte. Succes!

Hier dan nogmaals de links om dit stukje magie te downloaden of de demo te bekijken: