Designad scrollbar för DIV-tagg

Använder du jQuery på din hemsida kan du få till en snygg scrollbar av egna bilder. På jQuerys pluginsida hittar du mängder med roliga plugins till jQuery, bl a jScrollPane. Med jScrollPane kan du göra olika varianter av scrollbars. Här är ett exempel på en scrollbar där bakgrunden och slidern är bilder.

Skapa en bakgrundsbild för din scrollbar i gif-format med måtten 16 x 1 pixlar och döp till "bar.gif". Skapa en sliderbild i måtten 16 x 56 och döp till slider.gif. Ändra eventuellt inställningar i filen jScrollPane.js. Sök efter "settings".

Inom HEAD-taggen lägg:
<script src="/jquery.js" type="text/javascript"></script>
<script src="/jScrollPane.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('.scroll-pane').jScrollPane({
scrollbarWidth: 16
});
});
</script>

Ange klassen "scroll-pane" till en div-tagg:
<div class="scroll-pane">
Ditt innehåll.
</div>

I din CSS lägger du till:
.scroll-pane { width: 100%; overflow: auto; height: 400px; }
.scroll-pane_start { width: 100%; overflow: auto; height: 380px; }
.jScrollPaneContainer { position: relative; overflow: hidden; z-index: 1; }
.jScrollPaneTrack { position: absolute; cursor: pointer; right: 0; top: 0; height: 100%;
background: url(/images/bar.gif) top center repeat-y; }
.jScrollPaneDrag { position: absolute; background: url(/images/slider.gif) center center no-repeat; cursor: pointer; overflow: hidden; }

Ladda hem jQuery >>

Ladda ner jScrollPane >>

Fler exempel på scrollbars >>