[WEBKIT]Hoe je eigen Scrollbar met CSS

Hallo!

Voor deze tutorial heb je nodig:

- Een webkit ondersteunde browser
- Een HTML/CSS editor

We gaan van start.

1. Als eerst maak je een bestand met dit aan:

<html>
<head>
<title>Mijn scrollbar</title>
</head>
<body>
</body>
</html>

2. Dan maken we een CSS bestand met erin:

html, body {padding:0;margin:0;}

3. Vervolgens ga je de css naar je html linken, dat doe je zo:

<html>
<head>
<title>Mijn scrollbar</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/css.css" />
</head>
<body>
</body>
</html>

4. Hij is gelinkt. Nu kan je de pagina lekker lang maken door dit in je css te zetten:

body {min-height:1500px;}

5. Je kan nu lekker door je witte pagina scrollen , je kan er wat tekst neerzetten, doe wat je wilt.

6. Nu gaan we echt beginnen met de scrollbar , pak je css bestand erbij en zet dit erin:

::-webkit-scrollbar {
width: 17px;
height: 17px;
background-color: #FF0000;
border: none;
}

Zelf kan je hem natuurlijk aanpassen.

7. Sla dat op en upload hem naar je server, je scrollbar is weg, en nu zie je een rode balk, je kan natuurlijk de kleur nog aanpassen of eventueel een plaatje gebruiken.

8. Vervolgens beginnen we met de zogenaamde Thumb, dat is de balk waar je mee kan slepen
Voeg dit toe aan je CSS:

::-webkit-scrollbar-thumb {
background-color: #CDCDCD;
border: 1px solid #F0F0F0;
}
Pseudo ::-webkit-input-placeholder element
::-webkit-scrollbar-button {
background-color:#fff;
}

Met de thumb kan je slepen en met de Pseudo element kan je de Thumb zichtbaar maken. De thumb kleur kan je veranderen via de kleurcode bij de thumb.

9. Sla hem weer op en, tadaaa!! Hij is er bijna!

10. We gaan nu met de knoppen voor omhoog en omlaag beginnen, omdat ik deze tutorial simpel houd is het gewoon een kleurtje, je kan altijd nog een plaatje gebruiken!

Voeg dit toe aan je CSS:

::-webkit-scrollbar-button {
background-color: #F0F0F0;
}

Pseudo ::-webkit-search-decoration element
::-webkit-scrollbar-corner {
background-color: #F0F0F0;
}

Je hebt nu ligt grijze knoppen Sla hem weer op en upload hem, zie het resultaat
Dit was het in 10 stappen, zie het resultaat
1=Goed
10=slecht

Mooie tut, misschien nog wel een link naar een color picker ofzo, als je die kleuren wilt maken / opzoeken.
http://www.colorpicker.com/

Iemand een voorbeeld?

Voorbeeld mis ik inderdaad ook. En ik betwijfel dat het in elke browser werkt aangezien je CSS3 gebruikt. beter zet je div in div met de div in de div een absolute positie en de div daaarboven een vaste hoogte. Dan kan je met de "top" tag het item "verschuiven". Wel dom als iemand zn javascript uit heeft staan maar daar kijkt toch niemand naar want elke site zit popvol JS zonder te checken of de gebruiker zijn JS wel aanheeft aangezien iedereen dat heeft.

Daarom staat erbij: WEBKIT
Werkt ook via webkit. Ik ga dit ook bij mijn nieuwe site toepassen, word dan als demo gebruikt ;D

Prima tutorial, alleen jammer van dit soort dingen is dat het niet werkt in veel browsers.

Ik vertrouw tegenwoordig een hoop op jQuery, hoewel dat ook niet helemaal crossbrowser is.