Ndonjëherë është e nevojshme të vendosni një pjesë të madhe teksti në një dritare të vogël që nuk përshtatet plotësisht atje, për të zgjidhur këtë problem është e lehtë të krijoni një shtresë lëvizëse - lëvizëse div.

Ajo do të marrë

Shtresa me madhësi fikse dhe stil CSS.

CSS

Klasa .scroll CSS vendos parametrat 600 pikselë të gjatë dhe 300 pikselë të lartë, mbushjen, kufirin dhe ngjyrën e sfondit. POR! Më e rëndësishmja, parametri "overflow: auto" vendos që shiriti i lëvizjes të shfaqet kur sasia e tekstit është më e madhe se madhësia e shtresës.

Lëvizja (gjerësia: 500 px; lartësia: 300 px; / * kërkohet madhësi fikse * / tejmbushja: automatikisht; / * lëvizja shfaqet sipas nevojës * / mbushja: 10 pikselë 20 px; kufiri: # 999 1 px solid; ngjyra e sfondit: #FAFAFA;)

HTML

Rezultati

Në ekran do të shihni një kornizë të vogël me tekst dhe një kufi gri.

Më të përhapurit janë ftohësit e etilen glikolit të bazuar në etilen glikol dhe ujë (i distiluar) me një kompleks aditivësh.

Antifrizët fitohen si tretësirë ​​ujore të koncentrateve përkatëse. Gjatë funksionimit, cilësia e antifrizit mund të kontrollohet nga dendësia. Gjatë funksionimit, uji avullohet fillimisht nga ftohësi, i cili duhet të rimbushet (distilohet) periodikisht. Është e nevojshme të sigurohet që asnjë benzinë ​​dhe vajra të mos futen në antifriz, pasi ato shkaktojnë shkumë dhe lëshimin e lëngut nga sistemi.

Jeta e shërbimit të ftohësve si "Tosol" dhe "Lena" është e kufizuar nga jeta e shërbimit të aditivëve dhe zakonisht është 2 vjet; kilometrazhi mesatar për makina të ndryshme është 50,000 km.

Kur servisoni një automjet të përdorur për herë të parë, ftohësi duhet të zëvendësohet. Pasi të keni kulluar lëngun e vjetër, mbushni sistemin me ujë të pastër, ndizni motorin dhe lëreni të punojë për 15-20 minuta; më pas kullojeni ujin dhe rimbushni sistemin me ftohës të ri.

3. Detyrimi i lëvizjes vertikale dhe horizontale në bllokun CSS
4. Një shembull i një blloku div lëvizës

Në këtë artikull do të analizojmë çështjen e krijimit të një blloku (div) madhësi fikse me aftësinë për të lëvizur horizontalisht dhe vertikalisht. Kjo mund të zbatohet duke përdorur CSS... Përgjegjës për këtë prona e tejmbushjes.

Rreth tejmbushjes së pronës së dobishme

Pronës vërshojështë përgjegjës për shfaqjen e përmbajtjes së një elementi blloku. Mund të përdoret kur përmbajtja nuk përshtatet plotësisht dhe shkon përtej zonës së bllokut.

vërshoj-x- është përgjegjës për paraqitjen horizontale të përmbajtjes së një elementi blloku.
vërshoj-y- është përgjegjës për shfaqjen vertikalisht të përmbajtjes së një elementi blloku.

Kodi CSS

Prokrutka (
tejmbushje: auto; / * veti për të lëvizur horizontalisht. Automatik nëse përmbajtja është më e madhe se blloku * /
}

Vetitë dhe vlerat e tejmbushjes

të dukshme- shfaq të gjithë përmbajtjen e elementit, edhe përtej gjerësisë së specifikuar.
i fshehur- shfaqet vetëm zona brenda elementit, pjesa tjetër është e fshehur.
rrotulloni- shtoi me forcë një shirit lëvizës horizontal (y) ose horizontal (x).
auto- shtohet automatikisht shirit horizontal lëvizja nëse blloku është më i vogël.

Konsideroni një shembull të një klase CSS. Në gjerësi dhe lartësi, vendosim gjerësinë dhe lartësinë e dëshiruar të bllokut (përmbajtja e bllokut nuk do të shkojë përtej tyre), dhe me vetinë e tejmbushjes: auto; vendosni lëvizjen horizontalisht nëse është e nevojshme

Kodi CSS

Prokrutka (
gjerësia: 150 px; / * gjerësia e bllokut tonë * /
lartësia: 100 px; / * lartësia e bllokut tonë * /


tejmbushje: auto; / * veti për të lëvizur horizontalisht. Automatik nëse ka më shumë bllok * /
}

Lëvizja e detyruar në një bllok CSS

Ju gjithashtu mund të detyroni lëvizjen në lartësi dhe gjerësi. Për ta bërë këtë, çdo aks: tejmbushje-y: lëviz; (vertikale) tejmbushje-x: lëviz; (horizontale) ne specifikojmë parametrin e rrotullimit, lëvizje e detyruar.

Kodi HTML dhe CSS

Prokrutka (
lartësia: 150 px; / * lartësia e bllokut tonë * /
sfond: #fff; / * ngjyra e sfondit, e bardhë * /
kufiri: 1px solid # C1C1C1; / * madhësia dhe ngjyra e kufirit të bllokut * /


}

Shembull i bllokut të lëvizjes div

Kodi HTML dhe CSS

Një nga pronat vërshoj mund të hiqet, atëherë do të ketë lëvizje vetëm përgjatë një aksi, gjë që është mjaft e mjaftueshme.
Shikoni punën e skenarit Për shembull më poshtë.

Nga autori: artikull nga i ftuari ynë, Peter Bizmans. Peter është një zhvillues i faqes së përparme në faqen Audience, ku i pëlqen stilet e të shkruarit në SCSS. Sot ai do të na tregojë atë që unë e quaj një truk i sinqertë CSS. I gjithë rrjeti është vertikal. Ju e lexoni faqen si një libër i zakonshëm: nga e majta në të djathtë, nga lart poshtë. Por ndonjëherë ju dëshironi të largoheni nga vertikaliteti dhe të bëni diçka të çmendur: bëni listë horizontale... Ose edhe më e çmendur, një faqe horizontale!

Do të ishte mirë nëse mund të bënim kështu:

/ * kod i rremë * / div (drejtimi i rrotullimit: horizontal;)

/ * kod i rremë * / div ( rrotull - drejtimi: horizontal;

Fatkeqësisht, kjo nuk do të ndodhë. Kjo nuk është as në planet për CSS.

Kjo është shumë e keqe, sepse në kompaninë për të cilën punoj do të ishte shumë e dobishme. Ne bëjmë shumë prezantime dhe një prezantim është një gjë mjaft horizontale. Zakonisht raporti i pamjes së rrëshqitjeve është 4: 3 ose 16: 9. Për shkak të kësaj, ne kemi problem i vazhdueshëm me sllajde horizontale dhe teknologji vertikale të internetit. Me "ne" nënkuptoj veten time. Por ajo që dua është vështirësia.

Një tjetër rast përdorimi

Më erdhi në mendje mënyrë specifike aplikacion. Ideja është se do të ishte e përshtatshme për blerësit që të shikonin të gjitha produktet në një rrëshqitje. Natyrisht, katalogu i produkteve nuk do të përshtatej në një formë. Prandaj, vendosëm ta ndajmë katalogun në tre kategori, secila me lëvizje horizontale... Kështu, tre më mallra popullore e dukshme në çdo kategori dhe e hapur për produkte më pak të rëndësishme akses të lehtë.

Mënyra pa JavaScript

Të gjithë e dimë se ka shumë mënyra për të bërë lëvizje horizontale në JavaScript. Ka disa shembuj në CSS-Tricks. Pyesja veten nëse ishte e mundur të përkthej kjo ide CSS e pastër... Zgjidhja doli të ishte shumë e thjeshtë:

krijoni një enë me elementë;

rrotulloni enën 90 gradë në të kundërt të akrepave të orës në mënyrë që buza e poshtme të jetë në të djathtë;

rrotulloni elementët brenda enës përsëri në vend.

Hapi 1) krijoni kontejnerin

Krijo bllok div me shumë elementet fëmijë.

Në shembullin tonë, kontejneri i lëvizshëm do të jetë 300px i gjerë dhe do të përmbajë 8 elementë 100x100px. Madhësitë janë arbitrare, ju mund të vendosni ndonjë.

< div class = "katrore me rrotulla horizontale"> < div >pika 1< / div > < div >pika 2< / div > < div >pika 3< / div > < div >pika 4< / div > < div >pika 5< / div > < div >pika 6< / div > < div >pika 7< / div > < div >pika 8< / div > < / div >

Lartësia e enës do të bëhet gjerësia dhe anasjelltas. Nën "gjerësia" e kontejnerit do të jetë 300 px:

Mbështjellës me lëvizje horizontale (gjerësia: 100 px; lartësia: 300 px; tejmbushje-y: automatik; tejmbushje-x: e fshehur;)

gjerësia: 100 px; lartësia: 300 px; tejmbushje - y: auto; tejmbushje - x: i fshehur;

Dhe fëmijët:

Horizontal-scroll-wrapper> div (gjerësia: 100 px; lartësia: 100 px;)

Horizontal - rrotull - mbështjellës> div ( gjerësia: 100 px; lartësia: 100 px;

Hapi 2) rrotulloni enën

Tani ju duhet të rrotulloni enën me -90 gradë në Ndihmë CSS transformojnë vetitë... Ne morëm një rrotullues horizontal.

Horizontal-scroll-wrapper (... transformimi: rrotullohet (-90 gradë); transformimi-origjina: lart djathtas; }

Horizontal - rrotull - mbështjellës ( . . . transformimi: rrotullimi (- 90 gradë);

Ekziston vetëm një problem i vogël: fëmijët rrotulloheshin me kontejnerin.

Hapi 3) vendosini fëmijët në vend

Pra, si t'i ktheni artikujt në vend? Rrotulloje atë duke përdorur veçorinë transform CSS.

Horizontal-scroll-wrapper> div (... transformimi: rrotullo (90 gradë); transformimi-origjina: lart djathtas;)

Horizontal - rrotull - mbështjellës> div ( . . . transformimi: rrotullimi (90 gradë); transformimi - origjina: lart djathtas;

Hapi 4) pozicionimi fiks

Duket mirë, por ka disa probleme.

Ne e rrotulluam enën dhe vendosëm këndin e sipërm të djathtë si spirancë, për shkak të kësaj Pjesa e dorës së majtë zhvendosur nga gjerësia e enës. Nëse e keni të vështirë të imagjinoni, thjesht vendosni gishtin në të djathtë këndi i sipërm faqe dhe rrotullojeni atë. Dalje: duhet ta rrotulloni mbrapsht duke përdorur veçorinë translate.

Me mire tani. Por elementi i parë ende nuk është i dukshëm pasi i njëjti problem vërehet edhe me fëmijët. Kjo mund të korrigjohet duke i dhënë fëmijës së parë një diferencë të lartë me gjerësinë e tij, ose duke i transformuar të gjithë elementët si një enë. Mënyra më e lehtë që kam gjetur është të shtoj mbushje të sipërme në enë të barabartë me gjerësinë e fëmijëve, duke krijuar kështu një tampon për elementët.

Përputhshmëria

Kam kontrolluar përputhshmërinë në pajisjet e disponueshme për mua.

Desktop

Meqenëse stilimi i shiritave lëvizës deri më tani funksionon vetëm në shfletuesit Webkit / Blink, një shirit i rregullt lëvizës gri shfaqet në Firefox dhe IE. Kjo mund të rregullohet me JS dhe të fshihet fare, por kjo është një temë për një mësim tjetër.

Lëvizja me timonin e miut funksionon mirë në desktop. Por laptopi im ka mendimin e vet për këtë çështje. Në pajisjet me ekrane me prekje dhe tastierë me prekje, demonstrimi sillet sikur div të mos ishte rrotulluar fare.

Pajisje celulare

U befasova këndshëm kur mësova se Android e kupton që kontejneri është rrotulluar dhe ju lejon të lëvizni me rrëshqitje djathtas dhe majtas.

Përkundrazi, me iOS, gjërat nuk janë aq të qetë. Shfletuesi sillet sikur kontejneri të mos ishte rrotulluar fare. Prandaj, duhet të përdorni rrëshqitjet lart e poshtë për të lëvizur, gjë që është mjaft e çuditshme. Mbushje: e fshehura nuk e zgjidh problemin.

konkluzioni

Sipas faqes së internetit Can I Use, transformimet në CSS tani mbështeten nga 93% + e përdoruesve (në kohën e këtij shkrimi, nëntor 2016). Ky nuk duhet të jetë problem.

Megjithatë, është më mirë të mos e përdorni këtë metodë në mënyrë produktive. E testova në disa pajisje, por jo të gjitha dhe jo aq tërësisht.

Më së shumti një problem i madh- hyrje ndijore, në të cilat duhet të rrëshqitni lart e poshtë për të shkuar majtas dhe djathtas. Zgjidhja mund të jetë të shkruani një mesazh në faqe me një shpjegim, por më pas duhet të mbështeteni në faktin që përdoruesit do ta lexojnë atë. Dhe edhe atëherë do të ishte në kundërshtim me sensin e përbashkët. Një zgjidhje tjetër është të kapni inputet ndijore duke përdorur JS në pajisje, por atëherë është më mirë të shkruani gjithçka në JS dhe të braktisni plotësisht hakimin tonë CSS.

Në këtë artikull, ne do të analizojmë në detaje veçorinë e tejmbushjes me të gjitha vlerat e saj, e cila gjithashtu ju lejon të shtoni ose hiqni një shirit lëvizjeje horizontale / vertikale. Me fjalë të tjera, si të krijoni shirita lëvizës.

Overflow në CSS është përgjegjëse për mënyrën se si do të duket shfaqja e informacionit në një bllok nëse përmbajtja tejkalon lartësinë ose gjerësinë e këtij blloku. Kjo pronë vlen vetëm për elementet e bllokut(ekrani: bllok; ose ato që fillimisht janë bllok - div e kështu me radhë).

Vlerat e mundshme që merr kjo pronë (të dukshme si parazgjedhje):

• I dukshëm - Shfaq të gjithë përmbajtjen e elementit, edhe përtej lartësisë dhe gjerësisë së specifikuar.
• Fshehur - Shfaqet vetëm zona brenda elementit, pjesa tjetër do të fshihet.
• Lëvizja - Shiritat e lëvizjes shtohen gjithmonë.
• Auto - Shiritat e lëvizjes shtohen vetëm kur nevojitet.
• Inherit - Trashëgon vlerën nga prindi.

Më shpesh kjo veti përdoret për të hequr ose shtuar shirita lëvizjeje në ndonjë element. Kështu, për shembull, bëni me korniza në mënyrë që të mos i mbushni në madhësi të plotë. Ose për të futur një tekst të madh në mënyrë që të mos zërë gjysmë faqe, por të vendoset rehat në një bllok të veçantë, dhe atje mund të lëvizet dhe të lexohet. Në pjesën më të madhe, prona zgjidh problemin e një shfaqjeje të rehatshme të informacionit.

Në demonstrim, mund të vëzhgoni se si funksionon në të vërtetë secila prej vlerave të pronës:

Kodi HTML

trupi (diferenca: 0 0 0 0; mbushja: 0 0 60 px 0; madhësia e shkronjave: 16 px;) h2 (ngjyra: # CC0033;) div (gjerësia: 200 px; / * gjerësi fikse* / lartësia: 300 px; / * lartësi fikse * / kufiri: 1px solid # 555; mbushje: 4 px; diferenca: 4 px; noton: majtas; ).

Vlen t'i kushtohet vëmendje faktit se në këtë rast të veçantë, blloqe me një lartësi dhe gjerësi të caktuar fikse. Kjo është e rëndësishme, për shembull, merrni parasysh opsionin kur lartësia e bllokut është vendosur në automatik:

Mund të shohim që teksti shfaqet saktë brenda bllokut në të gjitha rastet, me përjashtim të një shqetësimi të vogël në rastin e lëvizjes, ku shfaqen shiritat e lëvizjes joaktive.

Por në këtë rast ekziston një rrezik i vogël, përballë të cilit shumë nuk e kuptojnë pse ka lindur dhe si ta rregullojnë atë. Çështja është se nëse një bllok me tejmbushje: i dukshëm; pra vlera e paracaktuar dhe përmbajtja e saj ka elemente me ndonjë vlerë notuese, përveç asnjërit, atëherë e gjithë kjo do të shfaqet gabimisht. Për të kuptuar se çfarë është kjo situatë, merrni parasysh një shembull:

Ekziston një bllok tjetër nën bllokun VisibleDiv.

Nuk ka asgjë nën bllokun VisibleDiv

trupi (diferenca: 0 0 0 0; mbushja: 0 0 60 px 0; madhësia e shkronjave: 16 px;) h2 (ngjyra: # CC0033;) p (lundrues: majtas;) div (gjerësia: 500 px; lartësia: automatik; kufiri: 1px solid # 555; mbushje: 4px; margjina: 4px;) .VisibleDiv (mbushje: e dukshme; sfond: rgba (0,255,0,0,1);) .injoroj (sfondi: rgba (0,255,0,0.6); ngjyra: # FFFFFF; pesha e shkronjave: e theksuar;)

Në rastin e parë, mund të shihni se përmbajtja me veçorinë float largohet nga blloku dhe nuk merret parasysh prej tij gjatë përcaktimit të lartësisë së bllokut, në rastin e dytë, nën bllokun me tejmbushje: i dukshëm; një bllok tjetër është vendosur posaçërisht dhe hije me një ngjyrë të ndryshme. Këta nuk janë shembujt e vetëm se si blloqe të tilla mund të sillen në faqe (me tejmbushje: të dukshme; dhe lartësi: automatik;). Kjo mund të rregullohet duke zëvendësuar vlerën e dukshme me të fshehur, duhet mbajtur mend se kjo pronë duhet të specifikohet vetëm për blloqet me lartësi: auto; nëse ka një lartësi fikse, atëherë ekziston një shans i madh që përmbajtja thjesht të fshihet nëse është më e madhe se lartësia e specifikuar.

Kështu do të dukej versioni i rishikuar:

Gjithashtu, nuk do të keni një problem të tillë nëse blloku me tejmbushje: i dukshëm; dhe lartësia: auto; gjithashtu vendosni një vlerë vetitë notuese... Në përgjithësi, në shumë raste, shfaqja e artikujve varet nga një grup karakteristikash dhe jo nga vetitë individuale.

udhëzime

Përdorni një etiketë div nëse dëshironi një shirit lëvizës jo për të gjithë faqen, por vetëm për një zonë të kufizuar të saj. V gjuha HTML(Gjuha e shënjimit të hipertekstit - "Gjuha e shënjimit të hipertekstit") "Etiketat" i referohen komandave individuale për shfletuesin për të shfaqur një element të veçantë të faqes. Në shumë forme e thjeshte një etiketë div (shpesh e referuar si një "shtresë") si kjo:

Këtu - mbyllje. Çdo gjë që vendoset ndërmjet etiketës hapëse dhe mbyllëse është në shtresë si në kontejner dhe kjo enë mund të dimensionohet - gjerësia dhe lartësia. Kjo bëhet me parametër shtesë("Atribut") stil që ndjek etiketën hapëse: