U ovom članku ćemo detaljno analizirati svojstvo overflow sa svim njegovim vrijednostima, koje vam također omogućava dodavanje ili uklanjanje horizontalne/vertikalne trake za pomicanje. Drugim riječima, kako napraviti trake za pomicanje.

Overflow u CSS-u je odgovoran za to kako će informacije u bloku izgledati ako sadržaj premašuje visinu ili širinu ovog bloka. Ovo svojstvo se odnosi samo na blok elemente (display : block ; ili one koji su inicijalno blok elementi - div i tako dalje).

Moguće vrijednosti koje ovo svojstvo može imati (zadana vrijednost je vidljiva):

• Vidljivo - prikazuje se cijeli sadržaj elementa, čak i izvan postavljene visine i širine.
• Skriveno - Samo područje unutar elementa je prikazano, ostalo će biti skriveno.
• Scroll - trake za pomicanje se uvijek dodaju.
• Automatski - trake za pomicanje se dodaju samo kada su potrebne.
• Naslijediti - Nasljeđuje vrijednost roditelja.

Najčešće se ovo svojstvo koristi za uklanjanje ili dodavanje traka za pomicanje nekom elementu. Ovako se, na primjer, rukuje okvirima kako se ne bi nagurali u punoj veličini. Ili da ubacite neki veliki tekst tako da ne zauzima pola stranice, već da se udobno smjesti u poseban blok, i tamo se može listati i čitati. Uglavnom, nekretnina rješava probleme udobnog prikaza informacija.

U demonstraciji možete vidjeti kako svaka od vrijednosti svojstva funkcionira u praksi:

HTML kod

tijelo (margina:0 0 0 0; padding:0 0 60px 0; font-size:16px;) h2 (boja:#CC0033;) div ( širina:200px; /* fiksna širina */ visina:300px; /* fiksna visina */ border:1px solid #555; padding:4px; margin:4px; float:left; ) .VisibleDiv (overflow:visible;) .HiddenDiv (overflow:hidden;) .ScrollDiv (overflow:scroll;) .AutoDiv ( overflow:auto;)

Vrijedno je obratiti pažnju na činjenicu da su u ovom konkretnom slučaju blokovi sa datom fiksnom visinom i širinom. Ovo je važno, na primjer, razmotrite opciju kada je visina bloka postavljena na auto:

Vidimo da je tekst u svim slučajevima ispravno prikazan unutar bloka, osim male neugodnosti u slučaju scroll , gdje se pojavljuju neaktivne trake za pomicanje.

Ali u ovom slučaju postoji mala opasnost, susrevši se s kojom mnogi ne razumiju zašto je nastala i kako to popraviti. Poenta je da ako je blok sa overflow: vidljiv; to jest, zadana vrijednost, a njegov sadržaj ima elemente sa bilo kojom float vrijednosti osim none , onda sve ovo neće biti ispravno prikazano. Da biste razumjeli kakva je ova situacija, razmotrite primjer:

Ispod bloka VisibleDiv je još jedan blok

Nema ničega ispod bloka VisibleDiv

tijelo (margin:0 0 0 0; padding:0 0 60px 0; font-size:16px;) h2 (boja:#CC0033;) p (float:left;) div ( width:500px; visina:auto; granica: 1px solid #555; padding:4px; margin:4px; ) .VisibleDiv (overflow:visible;background: rgba(0,255,0,0.1);) .ignor (background: rgba(0,255,0,0.6); color:# FFFFFF;font-weight:bold;)

U prvom slučaju, jasno je da sadržaj sa svojstvom float izlazi izvan bloka i ne uzima se u obzir pri određivanju visine bloka, u drugom slučaju ispod bloka sa overflow : visible ; drugi blok je posebno postavljen i ofarban u drugu boju. Ovo nisu jedini primjeri kako se takvi blokovi (s overflow : visible ; i height : auto ; ) mogu ponašati na stranici. Ovo je popravljeno zamjenom vidljive vrijednosti sa hidden, zapamtite da ovo svojstvo treba specificirati samo za blokove s visinom: auto; , ako postoji fiksna visina, onda postoji velika šansa da će se sadržaj jednostavno sakriti ako je veći od date visine.

Evo kako bi ispravljena verzija izgledala:

Također, nećete imati takav problem ako je blok sa overflow : vidljiv ; i visina: auto; određena je vrijednost svojstva float. Općenito, u mnogim slučajevima, prikaz elemenata ovisi o skupu svojstava, a ne o pojedinačnim svojstvima.

Svojstvo overflow kontrolira prikaz sadržaja elementa bloka ako se ne uklapa u potpunosti i prelazi područje specificirane veličine.

kratke informacije

Notacija

	Opis	Primjer
<тип>	Određuje tip vrijednosti.	<размер>
A&&B	Vrijednosti se moraju ispisati navedenim redoslijedom.	<размер> && <цвет>
A | B	Označava da treba odabrati samo jednu od predloženih vrijednosti (A ili B).	normalno | small-caps
A || B	Svaka vrijednost se može koristiti samostalno ili u kombinaciji s drugima bilo kojim redoslijedom.	širina || count
	Grupne vrijednosti.	[ usev || križ]
*	Ponovite nula ili više puta.	[,<время>]*
+	Ponovite jedan ili više puta.	<число>+
?	Navedeni tip, riječ ili grupa su opcioni.	umetnuti?
(A, B)	Ponovite najmanje A, ali ne više od B puta.	<радиус>{1,4}
#	Ponovite jedan ili više puta odvojeno zarezima.	<время>#

×

Vrijednosti

vidljivo Prikazuje cijeli sadržaj elementa, čak i izvan postavljene visine i širine. skriveno Samo područje unutar elementa je prikazano, ostalo će biti skriveno. Scroll Trake za pomicanje se uvijek dodaju. auto Scrollbars se dodaju samo kada je potrebno.

Sandbox

Winnie the Pooh uvijek nije bio nesklon malo osvježenja, posebno u jedanaest sati ujutro, jer je u to vrijeme doručak već odavno bio završen, a večera nije ni pomišljala da počne. I, naravno, užasno mu je bilo drago kada je vidio da Zec vadi šolje i tanjire.

div (visina: 80px; overflow: auto; )

Primjer

Rezultat ovog primjera prikazan je na sl. jedan.

Rice. 1. Primjena svojstva overflow

Objektni model

Objekt.style.overflow

Bilješka

Internet Explorer do verzije 7.0 uključujući:

• Relativno pozicionirani podređeni elementi s prelivanjem postavljenim na auto ili pomicanje ponašaju se kao da su postavljeni na položaj: fiksno.

Internet Explorer 8:

• Kombinovanje prelivanja sa vrednošću pomeranja sa svojstvima max-height i float može dovesti do nestanka elemenata veb stranice, što rezultira praznim ekranom u pretraživaču.
• Za blok koji ima svojstva float i overflow postavljena na scroll , širina postavljena preko svojstva max-width se zanemaruje.
• Visina okvira s horizontalnom trakom za pomicanje povećava se za visinu trake za pomicanje, iako CSS specifikacija navodi da dimenzije moraju uključivati ​​i trake za pomicanje.

Firefox 3.6 pogrešno primjenjuje prelivanje na grupe ćelija tabele ( , , ).

Specifikacija

Svaka specifikacija prolazi kroz nekoliko faza odobrenja.

• Preporuka (Recommendation) - specifikaciju je odobrio W3C i preporučuje se kao standard.
• Preporuka kandidata ( Moguća preporuka) - grupa odgovorna za standard je zadovoljna da ispunjava svoje ciljeve, ali je za implementaciju standarda potrebna podrška razvojne zajednice.
• Predložena preporuka ( Predložena preporuka) - u ovoj fazi, dokument se dostavlja Savjetodavnom odboru W3C na konačno odobrenje.
• Radni nacrt – zrelija verzija nacrta nakon rasprave i amandmana za reviziju zajednice.
• Nacrt urednika ( Urednički nacrt) je nacrt standarda nakon što su urednici projekta izvršili izmjene.
• nacrt ( Nacrt specifikacije) je prva verzija verzije standarda.

×
3. Forsirajte vertikalno i horizontalno skrolovanje u CSS bloku
4. Primjer za pomicanje div

U ovom članku ćemo raspravljati o pitanju kreiranja bloka (div) fiksne veličine s mogućnošću vodoravnog i okomitog pomicanja. Ovo se može uraditi pomoću CSS-a. Odgovoran za ovo overflow property.

O korisnom svojstvu prelivanja

Nekretnina overflow odgovoran je za prikaz sadržaja blok elementa. Može se primijeniti kada se sadržaj ne uklapa u potpunosti i prelazi područje bloka.

prelivanje x- odgovoran je za horizontalno prikazivanje sadržaja blok elementa.
overflow-y- odgovoran je za vertikalni prikaz sadržaja blok elementa.

CSS kod

Prokrutka (
preliv: auto; /* svojstvo za vodoravno pomicanje. Automatski ako je sadržaj veći od bloka */
}

overflow svojstva i vrijednosti

vidljivo- prikazuje se cijeli sadržaj elementa, čak i izvan postavljene širine.
skriveno- prikazuje se samo područje unutar elementa, ostalo je skriveno.
skrolujte- prisiljen je dodati horizontalnu (y) ili horizontalnu (x) traku za pomicanje.
auto- Automatski dodaje horizontalnu traku za pomicanje ako je blok manji.

Razmotrite primjer CSS klase. U širini i visini postavljamo širinu i visinu bloka koji nam je potreban (sadržaj bloka neće ići dalje od njih), a svojstvo overflow: auto; postavite horizontalno pomicanje ako je potrebno

CSS kod

Prokrutka (
širina:150px; /* širina našeg bloka */
visina:100px; /* visina našeg bloka */


preliv: auto; /* svojstvo za vodoravno pomicanje. Automatski ako je više od bloka */
}

Prisilno pomicanje u CSS bloku

Također možete prisilno pomicati po visini i širini. Da biste to učinili, svaka os: overflow-y: scroll; (vertikalno) overflow-x: skrol; (horizontalno) specificirajte parametar pomicanja, prisilno pomicanje.

HTML i CSS kod

Prokrutka (
visina:150px; /* visina našeg bloka */
pozadina: #fff; /* boja pozadine, bijela */
granica: 1px čvrsta #C1C1C1; /* veličina i boja okvira bloka */


}

Primjer za pomicanje div

HTML i CSS kod

Jedna od nekretnina overflow može se ukloniti, tada će ostati pomicanje samo duž jedne ose, što je sasvim dovoljno.
Pogledajte skriptu Na primjer ispod.