Verticale scroll-indicator II: lijn in de marge
De techniek die op deze bladzijde wordt besproken is bij uitstek geschikt voor lange stukken tekst.
Als je deze pagina scrollt, verschijnt er een verticale lijn in de linker marge, die langer wordt naarmate je verder scrollt.
Op deze bladzijde wordt uitgelegd hoe je zoiets maakt. De code van het voorbeeld kun je downloaden om zelf te gebruiken.
- Er worden twee items besproken:
- De werking van het script.
- Toepassen in je eigen site.
- Inspiratie voor dit item is ontstaan doordat ik het ergens op internet ben tegengekomen. Voor deze site heb ik het effect
nagebouwd.
- De werking van het script
- De code bestaat uit HTML, CSS en JavaScript.
- HTML
- De HTML bestaat uit een enkele <div>-tag, met de klasse lijn (voor de opmaak) en het id lijn (voor de communicatie met JavaScript).
- De <div>-tag mag overal in de <body> staan. Helemaal aan het begin is een prima plek.
- De <div>-tag mag geen content bevatten.
- CSS
- De CSS van het voorbeeld is eenvoudig. Er is één klasse, te weten lijn.
- De lijn is vastgepind aan de onderkant van het document. De hoogte en de breedte zijn allebei nul. De hoogte wordt door JavaScript veranderd als er wordt gescrolled.
- De randen links en rechts zijn allebei 2 pixels breed. De lijn wordt daardoor 4 pixels breed. De bovenkant van de lijn is afgerond voor een subtiel effect.
- Om te zorgen dat de lijn altijd zichtbaar is, is z-index op een hoge waarde gezet.
- visibility is hidden. Die wordt door JavaScript op visible gezet als er wordt gescrolled.
- JavaScript
- Het JavaScript begint met de declaratie van een viertal variabelen: yPerc, aa, bb en cc.
Dit zijn allemaal hulpvariabelen, o.a. bedoeld om dubbel rekenwerk te voorkomen.
In yPerc bevat de afstand waarover is gescrolled als percentage van de hoogte van het document en wordt met elke scroll-actie bijgewerkt. In aa wordt een referentie naar de lijn opgeslagen, bb en cc bevatten de gerenderde hoogte van het document resp. de zichtbare hoogte van het document in het window. - Daarna is er een event-listener die actief wordt als de pagina is geladen. Deze stelt aa en bb in en maakt event-listeners voor scrollen en resizen van het window. Deze drie listeners laten de function lijn() starten.
- De function lijn() is de spil in het verhaal.
- Als eerste wordt de variabele cc ingesteld. Als de gerenderde hoogte van het document kleiner is dan de beschikbare hoogte van het browserwindow kan er niet worden gescrolled. In dat geval stopt de uitvoering.
- Vervolgens wordt berekend hoever er is gescrolled als percentage van de gerenderde hoogte van het document. Dat wordt opgeslagen in yPerc.
- Als het percentage groter is dan 1 (yPerc > 0.01), wordt de lijn zichtbaar door visibily op visible te zetten. Anders wordt de lijn verborgen door visibily op hidden te zetten. Dan wordt ook de uitvoering van streep() afgebroken.
- In principe kan yPerc groter worden dan 1 (100%). Als dat gebeurt wordt yPerc op 1 gezet.
- Tenslotte wordt de hoogte van de lijn ingesteld op yPerc × cc (= de zichtbare hoogte van het document in het window), in pixels. Daar worden nog 10 px van afgehaald, zodat de lijn de bovenkant van het document net niet haalt.
- Toepassen in je eigen site
- Pas het uiterlijk van de lijn aan aan je eigen wensen. De CSS-eigenschappen die de kleur en de breedte van de border bepalen kun je zonder meer veranderen. Kies de kleur niet te opvallend, zorg wel dat de lijn niet wegvalt tegen de achtergrond en dat er voldoende contrast is met de content zodat de lijn goed zichtbaar blijft.
- De lijn moet niet dwars door letters, plaatjes, enz. lopen, want dat stoort. Geef de content zonodig wat marge (padding-left of margin-left) om ruimte te maken voor de lijn.
- Als je de lijn aan de rechterkant van de content wilt hebben, vervang je left in right in de klasse lijn.
- Als je de lijn van boven naar beneden wilt laten groeien (in plaats van van beneden naar boven zoals in het voorbeeld)
vervang je bottom door top in de klasse lijn.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<style>
.lijn {
position:fixed;
bottom:0;
left:2px;
width:0;
height:0;
border:2px solid maroon;
border-radius: 2px px 0 0;
z-index:9999;
visibility:hidden;
}
</style>
<script>
var yPerc, aa, bb, cc;
window.addEventListener("load", function() {
aa = document.getElementById('lijn');
bb = document.body.clientHeight;
window.addEventListener("resize", streep);
window.addEventListener("scroll", streep);
streep();
});
function streep() {
cc = window.innerHeight;
if (bb <= cc) return; // Er moet wel wat te scrollen zijn
yPerc = window.pageYOffset / (bb - cc); // Hoe ver is er gescrolled?
if (yPerc > 0.01) {
aa.style.visibility = "visible"; // Er moet minstens 1% zijn gescrolled
if (yPerc > 1) yPerc = 1; // en niet meer dan 100%, want dat kan niet
} else {
aa.style.visibility = "hidden";
return;
}
aa.style.height = yPerc*cc - 10 + "px";
}
</script>
(Zet dit "ergens" in de <BODY>, bijvoorbeeld aan het begin).
<div class="lijn" id="lijn"></div>
Downloaden:
Druk op de knop:
File: voorb116.zip, 736 bytes.
Opmerking:
Om te zorgen dat het effect goed zichtbaar wordt, is deze pagina langer gemaakt door het toevoegen van een aantal paragrafen
met "Lorem ipsum" tekst.
