Slik aktiverer og Disable rullefelt med Javascript

December 16

Rullefelt i en webside kan tillate deg å spare skjermen eiendomsmegling ved å la leserne til å bla i en <div> eller lignende element. Men noen ganger kan disse rullefelt virke skjemmende heller enn nyttig. For å gi leserne valget, legge til en knapp som veksler mellom å aktivere og deaktivere scrollbars med ett klikk.

Bruksanvisning

1 Åpne websiden i en HTML-editor eller et tekstredigeringsprogram som Notisblokk (Microsoft Windows), TextEdit (Apple OSX) eller pico (* nix systemer).

2 Finn dokumentet header, som begynner med en "<head>" tag og slutter med en avsluttende "</ head>" tag. På linje etter "<head>" tag, legge en enkel Javascript-funksjon for å aktivere og deaktivere rullefelt:

<! -

funksjon toggleScrollbar (el_id) {

if (document.getElementById (el_id) .style.overflow == "skjult") {document.getElementById (el_id) .style.overflow = "bla"; }

else {document.getElementById (el_id) .style.overflow = "skjult"; }

}

</ Script>

3 Finn element (for eksempel en "<div>" eller en form "<textarea>") og merk den "id", definert av attributtet "id =" i koden. Hvis elementet ikke har en id allerede, legge til en, noe som gjør at det er unikt og ikke deles av andre elementer på siden.

4 Legg til en ny linje etter elementets avsluttende koden med en div refererer til "toggleScrollbar ()" -funksjonen i en "onclick =" attributt:

<Div onclick = "toggleScrollbar ( 'container')" style = "border: 1px solid # 000000;"> Toggle rullefelt </ div>

Endre 'container "til id av elementet med scrollbars du ønsker å skjule.

5 Lagre og lukk HTML-dokumentet før du åpner den i en nettleser. Klikk på "Toggle rullefelt" for å bekrefte at rullefeltet blir nøyaktig skjult og vist.