Ponekad je potrebno postaviti veliki komad teksta u mali prozor koji tu ne stane u potpunosti, da biste riješili ovaj problem, lako je kreirati sloj za pomicanje - pomicanje div.

Trebaće

Sloj fiksne veličine i CSS stil.

CSS

.scroll CSS klasa postavlja parametre dužine 600px i visine 300px, padding, ivicu i boju pozadine. ALI! Što je najvažnije, parametar overflow: auto postavlja traku za pomicanje da se pojavi kada je količina teksta veća od veličine sloja.

Scroll (širina: 500px; visina: 300px; / * potrebna je fiksna veličina * / overflow: auto; / * pomicanje se pojavljuje po potrebi * / padding: 10px 20px; granica: # 999 1px čvrsta; boja pozadine: #FAFAFA;)

Html

Rezultat

Na ekranu ćete videti mali okvir sa tekstom i ivicom siva.

Najrasprostranjenije su etilen glikol rashladne tečnosti na bazi etilen glikola i vode (destilirane) sa kompleksom aditiva.

Antifrizi se dobijaju kao vodeni rastvori odgovarajućih koncentrata. Tokom rada, kvalitet antifriza se može kontrolisati gustinom. Tokom rada, voda prvo isparava iz rashladnog sredstva, koje treba povremeno dopuniti (destilirati). Potrebno je osigurati da benzin i ulja ne dođu u antifriz, jer izazivaju pjenu i oslobađanje tečnosti iz sistema.

Vijek trajanja rashladnih tekućina kao što su "Tosol" i "Lena" ograničen je vijekom trajanja aditiva i obično je 2 godine; prosječna kilometraža za razne automobile je 50.000 km.

Prilikom prvog servisiranja rabljenog vozila potrebno je zamijeniti rashladnu tečnost. Nakon što ispraznite staru tečnost, napunite sistem čistom vodom, pokrenite motor i ostavite da radi u praznom hodu 15-20 minuta; zatim ispustite vodu i napunite sistem novom rashladnom tečnošću.

3. Forsiranje vertikalnog i horizontalnog pomicanja u CSS bloku
4. Primjer kliznog div bloka

U ovom članku ćemo analizirati pitanje kreiranja bloka (div) fiksna veličina sa mogućnošću vodoravnog i okomitog pomicanja. Ovo se može implementirati koristeći CSS... Odgovoran za ovo overflow svojstvo.

O prelivu korisnog svojstva

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

overflow-x- odgovoran je za horizontalno prikazivanje sadržaja blok elementa.
overflow-y- odgovoran je za vertikalno prikazivanje sadržaja blok elementa.

CSS kod

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

Overflow svojstva i vrijednosti

vidljivo- prikazuje cjelokupni sadržaj elementa, čak i izvan navedene širine.
skriveno- prikazuje se samo područje unutar elementa, ostalo je skriveno.
skrolujte- nasilno dodana horizontalna (y) ili horizontalna (x) traka za pomicanje.
auto- automatski dodano horizontalna traka skrolovanje ako je blok manji.

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

CSS kod

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


overflow: auto; / * svojstvo za vodoravno pomicanje. Automat ako ima više blokova * /
}

Prisilno skrolovanje u CSS bloku

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

HTML i CSS kod

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


}

Primjer za pomicanje div bloka

HTML i CSS kod

Jedna od nekretnina overflow može se ukloniti, tada će doći do pomicanja samo duž jedne ose, što je sasvim dovoljno.
Pogledajte rad skripte Na primjer ispod.

Od autora:članak našeg gosta, Petera Bizmansa. Peter je front-end programer na stranici Audience, gdje uživa u stilovima pisanja u SCSS-u. Danas će nam pokazati ono što ja zovem poštenim CSS trikom. Cijela mreža je okomita. Čitate stranicu kao običnu knjigu: s lijeva na desno, odozgo prema dolje. Ali ponekad poželite da pobegnete od vertikalnosti i uradite nešto ludo: uradite horizontalna lista... Ili još luđe, horizontalna stranica!

Bilo bi lijepo kada bismo mogli ovako:

/ * lažni kod * / div (smjer pomicanja: horizontalno;)

/ * lažni kod * / div ( pomicanje - smjer: horizontalno;

Nažalost, to se neće dogoditi. Ovo čak nije ni u planovima za CSS.

To je jako loše, jer bi u kompaniji u kojoj radim bilo vrlo korisno. Radimo puno prezentacija, a prezentacija je prilično horizontalna stvar. Obično je omjer stranica 4:3 ili 16:9. Zbog ovoga imamo uporni problem s horizontalnim slajdovima i vertikalnim web tehnologijama. Pod "mi" mislim na sebe. Ali ono što volim je poteškoća.

Još jedan slučaj upotrebe

Palo mi je na pamet specifičan način aplikacija. Ideja je da bi kupcima bilo zgodno da vide sve proizvode na jednom slajdu. Naravno, katalog proizvoda ne bi stao u jedan oblik. Stoga smo odlučili podijeliti katalog u tri kategorije, svaka po sebi horizontalno pomicanje... Dakle, tri najviše popularna roba vidljivo u svakoj kategoriji i otvoreno za manje važne proizvode lak pristup.

Put bez JavaScripta

Svi znamo da postoji mnogo načina za horizontalno pomicanje u JavaScriptu. Postoje neki primjeri na CSS-Tricks. Pitao sam se da li je moguće prevesti ovu ideju čisti CSS... Ispostavilo se da je rješenje vrlo jednostavno:

kreirajte kontejner sa elementima;

okrenite posudu za 90 stepeni u smeru suprotnom od kazaljke na satu tako da donja ivica bude na desnoj strani;

vratite elemente unutar kontejnera na svoje mjesto.

Korak 1) kreirajte kontejner

Stvoriti div blok sa mnogima podređeni elementi.

U našem primjeru, kontejner koji se može pomicati bit će širok 300px i sadržavat će 8 elemenata veličine 100x100px. Veličine su proizvoljne, možete postaviti bilo koju.

< div class = "horizontalni-scroll-wrapper squares"> < div >stavka 1< / div > < div >tačka 2< / div > < div >tačka 3< / div > < div >tačka 4< / div > < div >tačka 5< / div > < div >tačka 6< / div > < div >tačka 7< / div > < div >tačka 8< / div > < / div >

Visina kontejnera će postati širina i obrnuto. Ispod "širine" kontejnera će biti 300px:

Horizontalni-scroll-wrapper (širina: 100px; visina: 300px; overflow-y: auto; overflow-x: hidden;)

širina: 100px; visina: 300px; preliv - y: auto; prelivanje - x: skriveno;

I djeca:

Horizontal-scroll-wrapper> div (širina: 100px; visina: 100px;)

Horizontalno - pomicanje - omotač> div ( širina: 100px; visina: 100px;

Korak 2) rotirajte kontejner

Sada morate rotirati posudu za -90 stepeni CSS pomoć transformirati svojstva... Imamo horizontalni skroler.

Horizontalni-scroll-wrapper (... transformacija: rotacija (-90 stepeni); transform-origin: desni vrh; }

Horizontalno - skrol - omot ( . . . transformacija: rotirati (- 90deg);

Postoji samo jedan mali problem: djeca su se rotirala sa kontejnerom.

Korak 3) vratite djecu na mjesto

Kako onda vratiti stavke na svoje mjesto? Rotirajte ga nazad koristeći transformaciju CSS svojstva.

Horizontal-scroll-wrapper> div (... transform: rotirati (90 stepeni); transform-origin: desno gore;)

Horizontalno - pomicanje - omotač> div ( . . . transformacija: rotirati (90 stepeni); transformacija - ishodište: desno gore;

Korak 4) fiksno pozicioniranje

Izgleda dobro, ali ima par problema.

Kontejner smo rotirali, a gornji desni ugao postavili kao sidro, zbog toga lijeva strana pomaknut za širinu kontejnera. Ako vam je teško da zamislite, samo stavite prst na desnu stranu gornji ugao stranicu i rotirajte je. Izlaz: trebate ga rotirati nazad koristeći svojstvo translate.

Bolje sada. Ali prvi element još uvijek nije vidljiv jer se isti problem uočava i kod djece. Ovo se može ispraviti tako što će se prvom djetetu dati gornja margina s njegovom širinom ili transformacijom svih elemenata poput kontejnera. Najlakši način koji sam pronašao je da dodam gornji padding u kontejner jednak širini djece, stvarajući tako bafer za elemente.

Kompatibilnost

Provjerio sam kompatibilnost na uređajima koji su mi dostupni.

Desktop

Pošto stil traka za pomeranje do sada funkcioniše samo u Webkit / Blink pretraživačima, obična siva traka za pomeranje je prikazana u Firefoxu i IE. Ovo se može popraviti pomoću JS-a i potpuno sakriti, ali to je tema za drugi vodič.

Skrolovanje pomoću točkića miša odlično funkcioniše na radnoj površini. Ali moj laptop ima svoje mišljenje o ovom pitanju. Na uređajima sa ekranima osetljivim na dodir i touch padovima, demo se ponaša kao da div uopšte nije rotiran.

Mobilni uređaji

Bio sam ugodno iznenađen kada sam saznao da Android razumije da je kontejner rotiran i omogućava vam da skrolujete prelaskom udesno i ulijevo.

Naprotiv, sa iOS-om stvari nisu tako glatke. Pretraživač se ponaša kao da se kontejner uopće nije rotirao. Zbog toga morate koristiti prelaske nagore i nadole za skrolovanje, što je prilično čudno. Overflow: skriveno ne rješava problem.

Zaključak

Prema web stranici Can I Use, transformacije u CSS-u sada podržava 93% + korisnika (u vrijeme pisanja ovog teksta, novembar 2016.). Ovo ne bi trebao biti problem.

Ipak, bolje je ne koristiti ovu metodu produktivno. Testirao sam ga na nekim uređajima, ali ne na svim i ne tako detaljno.

Najviše veliki problem- senzorni ulazi, u kojima trebate prevlačiti gore-dolje da biste otišli lijevo-desno. Rješenje bi moglo biti da na stranici napišete poruku s objašnjenjem, ali tada se morate osloniti na to da će je korisnici pročitati. Pa čak i tada bi to bilo u suprotnosti sa zdravim razumom. Drugo rješenje je zgrabiti senzorne ulaze koristeći JS na uređajima, ali onda je bolje sve napisati u JS-u i potpuno napustiti naš CSS hak.

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 izgledati prikaz informacija u bloku ako sadržaj premašuje visinu ili širinu ovog bloka. Ovo svojstvo se odnosi samo na blok elementi(prikaz: blok; ili oni koji su inicijalno blokirani - div i tako dalje).

Moguće vrijednosti koje ovo svojstvo uzima (vidljivo prema zadanim postavkama):

• Vidljivo - Prikazuje cijeli sadržaj elementa, čak i izvan navedene visine i širine.
• Skriveno - prikazuje se samo područje unutar elementa, ostalo će biti skriveno.
• Scroll - Trake za pomicanje se uvijek dodaju.
• Automatski - trake za pomicanje se dodaju samo kada je to potrebno.
• Naslijediti - Nasljeđuje vrijednost od roditelja.

Najčešće se ovo svojstvo koristi za uklanjanje ili dodavanje traka za pomicanje nekom elementu. Tako, na primjer, radite s okvirima kako ih ne biste nagurali u punoj veličini. Ili da ubacite neki veliki tekst 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 problem udobnog prikaza informacija.

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

HTML kod

tijelo (margina: 0 0 0 0; padding: 0 0 60px 0; veličina fonta: 16px;) h2 (boja: # CC0033;) div (širina: 200px; / * fiksna širina* / visina: 300px; / * fiksna visina * / granica: 1px čvrsta # 555; padding: 4px; margina: 4px; float: lijevo; ) .VisibleDiv (preljev: vidljiv;) .HiddenDiv (preljev: skriven;) .ScrollDiv (preljev: pomicanje;) .AutoDiv (preljev: 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 unutar bloka ispravno prikazan u svim slučajevima, osim male neugodnosti u slučaju skrolovanja, gdje se pojavljuju neaktivne trake za pomicanje.

Ali u ovom slučaju postoji mala opasnost, s kojom mnogi ne razumiju zašto je nastala i kako je popraviti. Poenta je da ako je blok sa prelivom: vidljiv; odnosno zadana vrijednost, a njegov sadržaj ima elemente sa bilo kojim float vrijednost, osim nijednog, onda će se sve ovo prikazati pogrešno. Da biste razumjeli kakva je ova situacija, razmotrite primjer:

Postoji još jedan blok ispod bloka VisibleDiv.

Nema ništa ispod bloka VisibleDiv

tijelo (margina: 0 0 0 0; padding: 0 0 60px 0; veličina fonta: 16px;) h2 (boja: # CC0033;) p (float: lijevo;) div (širina: 500px; visina: auto; granica: 1px solid # 555; padding: 4px; margina: 4px;) .VisibleDiv (prelijevanje: vidljivo; pozadina: rgba (0,255,0,0.1);) .ignor (pozadina: rgba (0,255,0,0.6); boja: # FFFFFF; težina fonta: bold;)

U prvom slučaju možete vidjeti da sadržaj sa svojstvom float napušta blok i da ga on ne uzima u obzir pri određivanju visine bloka, u drugom slučaju ispod bloka s overflow: vidljivo; drugi blok je posebno postavljen i zasjenjen drugom bojom. Ovo nisu jedini primjeri kako se takvi blokovi mogu ponašati na stranici (sa prelivom: vidljivo; i visinom: auto;). Ovo se može popraviti zamjenom vidljive vrijednosti sa skrivenom, treba imati na umu da ovo svojstvo treba specificirati samo za blokove s visinom: auto; ako postoji fiksna visina, onda postoji velika šansa da će sadržaj jednostavno biti skriven ako je veći od navedene visine.

Ovako bi izgledala revidirana verzija:

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

Instrukcije

Koristite oznaku div ako želite traku za pomicanje ne za cijelu stranicu, već samo za ograničeno područje. V HTML jezik(HyperText Markup Language - "Hypertext Markup Language") "Tagovi" se odnose na pojedinačne komande za pretraživač da prikaže određeni element stranice. U samom jednostavan oblik div oznaka (često se naziva "sloj") ovako:

Evo - zatvaranje. Sve što je postavljeno između otvaranja i zatvaranja tagova je u sloju kao u kontejneru i ovaj kontejner se može dimenzionisati - širina i visina. Ovo je urađeno sa dodatni parametar("Atribut") stil koji slijedi početnu oznaku: