En Script for å bla i Firefox

Firefox, som mange lesere, viser horisontale eller vertikale rullefelt når sideinnholdet overstiger størrelsen på nettleserens visningsområde. Som utvikler eller nettsted designer, har du muligheten til å avgjøre når et rullefelt posisjon endringer og til og med bla siden automatisk uten brukermedvirkning. Utfør denne magiske ved å legge til noen få linjer med skriptkode til HTML-dokumentet.

skjerm~~POS=TRUNC koordinater

Style Sheets og Javascript bruke et enkelt koordinatsystem når spore plasseringen av punktene i et nettleservindu. Den følgende CSS-klasse definerer et slikt punkt:

.location1 {position: absolute; top: 1000px; venstre: 900; px}

Denne klassen beskriver et punkt som er 1000 piksler fra toppen av nettleservinduet og 900 piksler fra venstre kant av nettleseren. Når du bruker Javascript for å oppdage rulle steder i Firefox, arbeider du med de øvre og venstre attributter. Følgende eksempel bestemmer leseren nåværende bla posisjon i forhold til sin øvre kant:

Var pageElement = document.getElementById ( 'divElement1');
Var topPosition = pageElement.scrollTop;

Den første setningen blir gjeldende loddrette rulle posisjonen til en side element, for eksempel en div hvis ID er "divElement1", og lagrer den i pageElement variabel. Den andre setningen blir at elementets scrollTop verdi og lagrer den i topPosition variabel. Skaff det horisontale rulle posisjon ved å undersøke scrollLeft eiendom. De scrollTop og scrollLeft egenskaper er spesifikke for Firefox, og er ikke en del av World Wide Internet Consortium offisielle spesifikasjonen.

kontrollere rulling

Du kan utføre interessante leser bragder ved å kjøre scrollTo funksjon. Følgende uttalelse ruller en webside ned 400 piksler:

Var verticalLocation = 400;
window.scrollTo (0, verticalLocation);

Den scrollTo funksjon, som fungerer i alle nettlesere, inkludert Firefox, godtar to parametere: den horisontale sideplassering og vertikal plassering. Den horisontale plassering er null i dette tilfellet. Den pageElement kan være dokumentets kropp eller et annet element slik div som inneholder tekst eller annet innhold. Rull ned til bunnen av siden ved hjelp av koden vist nedenfor:

Var verticalLocation = document.body.scrollHeight;
window.scrollTo (0, verticalLocation);

Scroll Wheel Detection

Flytt musehjulet sakte, og du vil høre klikk som på Web-siden ruller. Koden kan bestemme hvor mange linjer Siden flyttes ved å undersøke detaljene eiendom setter nettleseren når en DOMMouseScroll hendelse inntreffer i Firefox. Sett opp dette hendelseshåndterer som vist nedenfor:

pageElement.addEventListener ( "DOMMouseScroll", funksjon bla (hendelse) {
Var linesScrolled = event.detail;
}, falsk);

Denne koden legger hendelseshåndterer til en side element som heter pageElement. Den event.detail eiendom, som viser antall linjer flyttet, inneholder en positiv verdi hvis du blar deg nedover eller en negativ verdi hvis du blar up.The DOMMouseScroll hendelsen fungerer i alle nettlesere bortsett fra Internet Explorer. At browseren bruker onmousewheel arrangementet i stedet.

praktisk bruk

Hvis du kjenner de øvre og venstre koordinatene til et viktig element på websiden, kan du bruke scrollTo funksjonen for å rulle en brukers nettleser til det stedet som helst. Oppdager musehjulet klikk i Firefox kan også hjelpe deg med å lage nye typer Web-side navigasjon. I stedet for å klikke på en knapp for å styre en lysbildeserie, for eksempel, kan du tillate brukere å bytte bilder ved å flytte sine musehjul. Gjør dette ved å opprette et Javascript-objekt som inneholder nettadressene til bildene dine, og sykling gjennom disse bildene når koden din oppdager en endring i musehjulet posisjon.