HTML scroll polje

Napravite kutiju sa skrolovanjem teksta koristeći CSS i HTML

HTML skrol polje je kutija koja dodaje trake za pomicanje na desnu stranu i dno kada je sadržaj kutije veći od dimenzija kutije. Drugim rečima, ako imate kutiju koja se može uklapati oko 50 reči i imate tekst od 200 reči, HTML skrol polje će staviti trake za pomicanje da bi vam omogućili da vidite dodatnih 150 reči. U standardnom HTML-u koji bi jednostavno potisnuo dodatni tekst van kutije.

Pravljenje HTML skrolovanja je prilično jednostavno. Samo treba da podesite širinu i visinu elementa koji želite da pomerite, a zatim koristite svojstvo prelivanja CSS- a kako biste podesili kako želite da dođe do skrolovanja.

Šta raditi sa dodatnim tekstom?

Kada imate više tekstova nego što će se uklapati u prostor na vašem rasporedu, imate nekoliko opcija:

Najbolja opcija je tipično poslednja opcija: kreirajte skrolovanje tekst box. Zatim se i dalje može čitati ekstra tekst, ali vaš dizajn nije kompromitovan.

HTML i CSS za ovo bi bili:

tekst ovde ....

Overflow: auto; govori pregledaču da doda trake za pomicanje ako su potrebne da bi tekst zadržao prelivanje granica div. Ali kako bi ovo funkcionisalo, trebaju vam i karakteristike stila širine i visine postavljene na divu, tako da postoje granice prelivanja.

Takođe možete prekinuti tekst promenom preliva: auto; prelivati: skriveno ;. Ako izostavite svojstvo prelivanja, tekst će se prosuti preko granica div.

Možete dodati palete za pomicanje na više od teksta

Ako imate veliku sliku koju želite da prikažete u manjim prostorima, možete dodati barijere oko nje na isti način kao i tekstom.

/ p>

U ovom primeru, slika 400x509 je unutar 300x300 paragrafa.

Tabele mogu imati koristi od traka za pomeranje

Dugačke informacije mogu vrlo teško pročitati vrlo brzo, ali stavljajući ih unutar ograničene veličine, a zatim dodajući svojstvo prelivanja, možete generirati tablice sa puno podataka koje ne uzimaju ekstremni prostor na vašoj stranici .

Najlakši način je isto kao kod slika i teksta, samo dodajte div oko tabele, postavite širinu i visinu tog diva i dodajte svojstvo preopterećenja:

Ime Telefon tad>
Jennifer 502-5366 ....

Jedna stvar koja se dešava kada to učinite je horizontalna traka za pomicanje koja se obično pojavljuje jer pretraživač pretpostavlja da se hrom skrolskih traka preklapa sa tablicom. Postoji mnogo načina da ovo popravite od promene širine tabele i drugih. Ali moj omiljeni je jednostavno isključiti horizontalno skrolovanje pomoću CSS 3 prevlast-x. Samo dodajte overflow-x: skriveno; na div, a to će ukloniti horizontalnu traku za pomeranje. Obavezno provjerite ovo, jer možda postoji sadržaj koji nestaje.

Firefox podržava korišćenje TBODY oznaka za prelivanje

Jedna stvarno lepa karakteristika Firefox pretraživača je da možete koristiti svojstvo prelivanja na unutrašnjim oznakama tablica kao što su tbody i thead ili tfoot. To znači da možete postaviti trake za pomicanje na sadržaj stola, a ćelije za glavu ostaju usidrene iznad njih. Ovo radi samo u Firefoxu , što je suviše loše, ali to je lepa funkcija ako vaši čitaoci koriste Firefox samo. Pregledajte ovaj primer u Firefoxu da vidite šta mislim.

Ime Telefon
Jennifer 502-5366 ...