Scrollbars aanpassen in look & feel was tot voor kort nauwelijks mogelijk. Maar met een
jquery plugin is kunt u nu een scrollbar maken.
Scrollbars worden niet vormgegeven door de browser zelf, maar door het besturingssysteem dat gebruikt wordt. Zo zullen scrollbars voor Apple gebruikers er anders uitzien dan voor Microsoft Windows gebruikers; maar ook binnen Windows versies zijn weer verschillende stijlen van scrollbars.
Met Internet Explorer 5.5 was het nog mogelijk om met CSS met het scrollbar-face-color attribuut de scrollbars een andere stijl te geven. IE 5.5 is niet meer. Inmiddels gebruiken de meeste mensen IE 6 of 7, en er worden ook steeds meer andere browsers gebruikt, zoals Firefox, Safari of Google Chrome.
Bij veel websitebouwers en ontwerpers bestaat echter wel de behoefte om de scrollbars te kunnen aanpassen aan de look & feel van de website. Zeker wanneer er gebruik wordt gemaakt van deelvensters, frames of iframes waar de scrollbar dus niet voor het gehele venster is, en dus heel duidelijk aanwezig is in het scherm en eventueel 'vloekt' met de standaard scrollbars van het besturingssysteem van de gebruiker.
Gelukkig is het mogelijk om de stijl van de scrollbars volledig te bepalen met behulp van JavaScript.
Globaal komt het hier op neer:
- omsluit de scrollable area in een nieuw element met een HIDDEN overflow
- verwijder de overflow vanuit het inside element, waardoor u deze zo lang kunt laten zijn als u wilt
- voeg een eigen scrollbar toe en laat deze reageren op mouse events
Bekijk
dit voorbeeld:
stap voor stap
1 markup
<body> <div id="page-wrap"> <div class="scroll-pane"> </div> <img src="images/bottomshadow.png" alt="" class="bottomshadow" /> </div> </body>
|
2. CSS
* { margin: 0; padding: 0; }
body { font-size: 12px; line-height: 30px; font-family: Georgia, serif;
background: url(../images/clown.jpg) top left no-repeat #fbfbfb; }
#page-wrap { width: 244px; margin: 50px auto; position: relative; }
.scroll-pane { width: 234px; overflow: auto; padding-right: 10px; height: 400px; }
.bottomshadow { position: absolute; top: 375px; left: -47px; z-index: 9999; }
.jScrollPaneContainer { position: relative; overflow: hidden; z-index: 1; }
.jScrollPaneTrack { position: absolute; cursor: pointer; right: 0; top: 0; height: 100%;
background: url(../images/bar.jpg) top center repeat-y; padding: 3px; }
.jScrollPaneDrag { position: absolute; background: url(../images/ball.png) center center no-repeat;
cursor: pointer; overflow: hidden; } |
Met de jScrollPaneTrack en jScrollPaneDrag kunt u bepalen hoe de scroolbar en de handle ('blokje') eruit moet komen te zien.
3. JavaScript activeren
voeg JQuery toe aan uw pagina, dan de plugin en roep dan de plugin function aan met de gewenste parameters.
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jScrollPane.js"></script>
<script type="text/javascript">
$(function(){
$('.scroll-pane').jScrollPane({
scrollbarWidth: 12
});
});
</script> |
Enkele voorbeelden:
Bekijk het voorbeeld werkend op de website van George Michael
U kunt de
plugin hier downloaden.
