Home | Uitleg | Broncode
Beta
Simpel en snel een custom scrollbar in al je websites. Let op: Er is een nieuwe versie van de scrollbar.
De custom scrollbar blijkt een groot succes. Vele mensen willen er gebruik van maken.
Maar helaas bleek dit niet altijd goed te gaan, de meest voorkomende fout was het verspringen van de scroller. Dit lag in vrijwel alle gevallen aan de positionering van de div-elementen. Om dit probleem op te lossen is het javascript-bestand aangepast en moet er een klein stukje css aangepast worden. Het nieuwe javascript bestand is te downloaden via http://scrollbar.tomvanleijsen.nl/scrollbar.js. Daarnaast moet het div-element met id "slide" een extra css-stijl hebben, namelijk: position: relative. Dit lost het probleem in veel gevallen op. Onder het kopje uitleg vind je meer informatie en een werkend voorbeeld (example 03).
Loop je nu nog steeds tegen problemen aan, laat het weten via TvL Design - Contact.

Altijd al een custom scrollbar in je website willen maken, om je website net dat beetje extra te geven?

TvL Design had deze uitdaging voor een klant, er moest een scrollbar komen die bij de stijl van de website zou passen. Er mocht dus niet zo'n standaard grijs ding in beeld komen, waarvan enkel de kleuren aangepast kunnen worden. Nadat dit met flash niet goed lukte is er overgestapt naar JavaScript. Hier is een JavaScript bestand uit voort gekomen, welke gemakkelijk te implementeren is.

Je hoeft alleen maar twee div-elementen naast je tekstvlak te plaatsen, het JavaScript bestand te implementeren en 1 JavaScript functie uit te voeren. Vervolgens kan je de scrollbar geheel naar eigen smaak stijlen, zodat je altijd een scrollbar kan maken die perfect bij je website past.

Een voorbeeld van deze scrollbar is te zien op de website van Meuviro Interieurbouw.

Omdat er misschien meerdere mensen op zoek zijn naar iets dergelijks, of dit gewoon eens willen uitproberen, wordt op deze website het JavaScript bestand gepubliceerd en uitgelegd. Wel is er enige kennis van HTML en CSS nodig om ervoor te zorgen dat alles op zijn pootjes terecht komt.

TvL Design hoopt dat vele van jullie iets aan deze scrollbar hebben. Heb je nog ideeën, vragen of opmerkingen laat het dan weten via TvL Design - Contact.
TvL Design