Fjerne en loddrett rulle i Javascript

Rullefelt gi nettstedets seere en enkel måte å navigere lange tekstblokker hvis de ikke har skjermer som er store nok til å vise alt innholdet samtidig, men på en nøye utformet nettside automatiske rullefelt kan også være skjemmende og uhjelpsom. Fordi rullefelt kan styres via CSS, kan de fjernes på direkten via Javascript, noe som gjør bruk av Javascript er "stil" attributter.

Bruksanvisning

1 Åpne nettsidens kildekode i en HTML-editor eller vanlig tekstredigeringsprogram som den som følger med operativsystemet. I overskriften på websiden din (koden mellom "<head>" og "</ head>" koder) legge til følgende kode, og skaper en Javascript-funksjon for å skjule rullefelt:

<Script type = "text / javascript">

<! -

funksjons hidescrollbars (id) {

document.getElementById (id) .style.overflow = "skjult";

}

->

</ Script>

2 Bla ned til sideelementet som nå vises med en scrollbar og sjekk elementets "id"; hvis den ikke har en, legge til en unik kode - for eksempel: "<div id = 'this_is_a_unique_id' class =" ... "style =" ... ">" vil tildele id "this_is_a_unique_id" til div.

3 Legg til en ny linje som følger den avsluttende koden av elementet med en enkel <div> tag brukes til å utløse skjuling av den andre elementets rullefelt ved hjelp av sin unike ID. For eksempel:

<Div style = "border: 2px solid black;" onclick = "hidescrollbars ( 'this_is_a_unique_id)"> Skjul </ div>

Change "this_is_a_unique_id" til ID av elementet.

4 Lagre filen og åpne nettsiden i nettleseren din; Når du klikker på "Skjul" -knappen i dokumentet, vil den vertikale scrollbar festet til den andre element forsvinner.

Hint

  • De hidescrollbars () -funksjonen kan kalles av andre Javascript-hendelser i tillegg; for eksempel for å skjule scrollbar av en <div> element når det elementet når leseren beveger musen over den, legge linjen "onmouseover = hidescrollbars ( 'this_is_a_unique_id')" som en egenskap av elementets åpning tag.
  • Hvis du vil skjule rullefelt som standard, eller når siden lastes, bruk CSS i stedet: inne i elementet åpnings tag, legge følgende attributt: "style =" overflow: hidden; ' "for å hindre at scrollbar fra lasting i første omgang.