Uneori este necesar să plasați o bucată mare de text într-o fereastră mică care nu se potrivește complet acolo, pentru a rezolva această problemă este ușor să creați un strat cu derulare - div cu scroll.

Va dura

Strat de dimensiune fixă ​​și stil CSS.

css

Clasa .scroll CSS este setată la 600 px lungime și 300 px înălțime, umplutură, chenar și culoare de fundal. DAR! Cel mai important, overflow:auto setează bara de derulare să apară atunci când cantitatea de text este mai mare decât dimensiunea stratului.

Defilare ( lățime: 500 px; înălțime: 300 px; /* este necesară dimensiunea fixă ​​*/ overflow: automat; /* derulare apare după cum este necesar */ padding: 10px 20px; border:#999 1px solid; background-color:#FAFAFA; )

HTML

Rezultat

Pe ecran veți vedea un mic cadru cu text și un chenar culoarea gri.

Cele mai răspândite sunt lichidele de răcire cu etilenglicol pe bază de etilenglicol și apă (distilată) cu un complex de aditivi.

Antigelurile se obțin ca soluții apoase ale concentratelor corespunzătoare. În timpul funcționării, calitatea antigelului poate fi controlată prin densitate. Din lichidul de răcire în timpul funcționării, în primul rând, se evaporă apa, care trebuie completată periodic (distilată). Este necesar să vă asigurați că benzina și uleiurile nu intră în antigel, deoarece provoacă spumare și eliberarea de lichid din sistem.

Durata de viață a lichidelor de răcire precum „Tosol” și „Lena” este limitată de durabilitatea aditivilor și este de obicei de 2 ani; kilometrajul pentru diverse mașini este în medie de 50.000 km.

Când reparați o mașină uzată pentru prima dată, lichidul de răcire trebuie înlocuit. După scurgerea lichidului vechi, umpleți sistemul cu apă curată, porniți motorul și lăsați-l la ralanti timp de 15-20 de minute; apoi scurgeți apa și reumpleți sistemul cu lichid de răcire nou.

3. Forțați derularea verticală și orizontală în blocul CSS
4. Exemplu de defilare div

În acest articol, vom discuta problema creării unui bloc (div) marime fixa defilabil pe orizontală și pe verticală. Acest lucru poate fi implementat folosind CSS. Responsabil pentru asta proprietatea de debordare.

Despre proprietatea de overflow utilă

Proprietate revărsare este responsabil pentru afișarea conținutului elementului bloc. Poate fi aplicat atunci când conținutul nu se potrivește complet și depășește zona blocului.

preaplin x- este responsabil pentru afișarea conținutului elementului bloc pe orizontală.
preaplin-y- este responsabil pentru afișarea conținutului elementului bloc pe verticală.

Cod CSS

Prokrutka (
preaplin: automat; /* proprietate pentru a derula orizontal. Automat dacă conținutul este mai mare decât blocul */
}

proprietăți și valori de depășire

vizibil- este afișat întregul conținut al elementului, chiar și în afara lățimii stabilite.
ascuns- este afișată doar zona din interiorul elementului, restul este ascuns.
sul- forțat să adauge o bară de defilare orizontală (y) sau orizontală (x).
auto- adăugat automat bara orizontala derulați dacă blocul este mai mic.

Luați în considerare un exemplu de clasă CSS. În lățime și înălțime setăm lățimea și înălțimea blocului de care avem nevoie (conținutul blocului nu va depăși ele), iar proprietatea overflow: auto; setați derularea orizontală dacă este necesar

Cod CSS

Prokrutka (
latime: 150px; /* latimea blocului nostru */
înălțime: 100px; /* înălțimea blocului nostru */


preaplin: automat; /* proprietate pentru a derula orizontal. Automat dacă mai mult de un bloc */
}

Forțați defilarea într-un bloc CSS

De asemenea, puteți forța derularea în înălțime și lățime. Pentru a face acest lucru fiecare axă: overflow-y: scroll; (vertical) overflow-x: scroll; (orizontal) specificați parametrul de defilare, defilare forțată.

Cod HTML și CSS

Prokrutka (
înălțime: 150px; /* înălțimea blocului nostru */
fundal: #fff; /* culoare de fundal, alb */
chenar: 1px solid #C1C1C1; /* blocați dimensiunea și culoarea chenarului */


}

Exemplu de defilare div

Cod HTML și CSS

Una dintre proprietăți revărsare poate fi eliminat, apoi derularea de-a lungul unei singure axe va rămâne, ceea ce este suficient.
Vizualizați scenariul De exemplu de mai jos.

De la autor: un articol al invitatului nostru, Peter Bismens. Peter este un dezvoltator front-end la Audience, unde îi place să scrie stiluri în SCSS. Astăzi ne va arăta ceea ce eu numesc un truc CSS sincer. Întregul web este vertical. Citiți site-ul ca pe o carte normală: de la stânga la dreapta, de sus în jos. Dar uneori vrei să scapi de verticalitate și să faci ceva nebunesc: fă listă orizontală. Sau chiar mai nebunesc, un site orizontal!

Ar fi bine dacă am putea face așa ceva:

/* cod fals */ div (direcția de defilare: orizontală; )

/* cod fals */ div ( direcția de defilare: orizontală;

Din păcate, acest lucru nu se va întâmpla. Acest lucru nu este nici măcar în planurile în CSS.

Acest lucru este foarte rău, pentru că în compania în care lucrez mi-ar fi foarte util. Facem o mulțime de prezentări, iar o prezentare este un lucru destul de orizontal. De obicei, raportul de aspect al diapozitivelor este 4:3 sau 16:9. Din această cauză, avem problema constanta cu slide-uri orizontale și tehnologii web verticale. Prin „noi” mă refer la mine însumi. Dar ceea ce îmi place este dificultatea.

Un alt caz de utilizare

mi-a venit în minte mod specific aplicatii. Ideea este că ar fi convenabil pentru cumpărători să vadă toate produsele pe un singur slide. Desigur, catalogul de mărfuri nu s-ar încadra într-o singură formă. Prin urmare, am decis să împărțim catalogul în trei categorii, fiecare cu defilare orizontală. Astfel, cele trei cele mai multe articol popular vizibil în fiecare categorie și deschis către produse mai puțin importante acces usor.

Metodă fără JavaScript

Știm cu toții că există multe moduri de a face derulare orizontală în JS. Câteva exemple sunt pe CSS-Tricks. Mă întrebam dacă această idee poate fi implementată în CSS pur. Soluția s-a dovedit a fi foarte simplă:

creați un container cu elemente;

rotiți recipientul cu 90 de grade în sens invers acelor de ceasornic, astfel încât fața inferioară să fie pe dreapta;

rotiți elementele din interiorul recipientului înapoi la locul lor.

Pasul 1) creați un container

Crea bloc div cu multe elemente copil.

În exemplul nostru, containerul care poate fi derulat va avea o lățime de 300 px și va avea 8 elemente de 100 x 100 px. Dimensiunile sunt arbitrare, puteți seta oricare.

< div class = „pătrate orizontale-defilare-înveliș”> < div >elementul 1< / div > < div >punctul 2< / div > < div >punctul 3< / div > < div >punctul 4< / div > < div >punctul 5< / div > < div >punctul 6< / div > < div >punctul 7< / div > < div >punctul 8< / div > < / div >

Înălțimea recipientului va deveni lățimea și invers. Sub „lățimea” containerului va fi 300px:

Înveliș cu defilare orizontală ( lățime: 100 px; înălțime: 300 px; overflow-y: automat; overflow-x: ascuns; )

lățime: 100px înălțime: 300px overflow - y : auto ; preaplin - x : ascuns ;

Și elemente copil:

Orizontal-scroll-wrapper > div ( lățime: 100 px; înălțime: 100 px; )

orizontal - scroll - wrapper > div ( lățime: 100px inaltime: 100px;

Pasul 2) rotiți recipientul

Acum trebuie să rotiți recipientul cu -90 de grade când Ajutor CSS proprietăți de transformare. Avem un scroller orizontal.

ambalaj-defilare orizontală ( ... transformare: rotire (-90 de grade); origine-transformare: dreapta sus; }

orizontal - scroll - wrapper ( . . . transformare: rotire (- 90deg);

Există doar o mică problemă: elementele copil s-au rotit împreună cu containerul.

Pasul 3) puneți elementele copil înapoi la locul lor

Așadar, cum reașezi elementele la locul lor? Rotiți-l înapoi cu proprietatea de transformare CSS.

horizontal-scroll-wrapper > div ( ... transformare: rotire(90deg); origine-transformare: dreapta sus; )

orizontal - scroll - wrapper > div ( . . . transformare: rotire(90deg); transform - origine : dreapta sus ;

Pasul 4) poziționare fixă

Totul arată bine, dar există câteva probleme.

Din această cauză, am rotit containerul și am pus ancora în colțul din dreapta sus partea stângă mutat pe lățimea containerului. Dacă îți este greu să-ți imaginezi, pune-ți degetul în dreapta colțul de sus pagina și rotiți-o. Ieșire: trebuie să îl rotiți înapoi folosind proprietatea translate.

Deja mai bine. Dar primul element încă nu este vizibil, deoarece aceeași problemă se observă și cu elementele copil. Acest lucru poate fi remediat dând primului element copil o marjă superioară cu lățimea sa sau transformând toate elementele ca un container. Cel mai simplu mod pe care l-am găsit este să adaug o umplutură superioară la container care este egală cu lățimea elementelor copil, creând astfel o zonă tampon pentru elemente.

Compatibilitate

Am verificat compatibilitatea pe dispozitivele disponibile pentru mine.

Desktop

Deoarece stilul barei de defilare funcționează în prezent numai în browserele Webkit/Blink, Firefox și IE arată o bară de defilare simplă gri. Acest lucru poate fi remediat cu JS și ascuns cu totul, dar acesta este un subiect pentru un alt tutorial.

Derularea cu rotița mouse-ului funcționează excelent pe desktop. Dar laptopul meu are propria sa opinie în această privință. Pe dispozitivele cu ecrane tactile și touchpad-uri, demonstrația se comportă ca și cum div-ul nu ar fi fost rotit deloc.

Dispozitive mobile

Am fost plăcut surprins să aflu că Android recunoaște că un container a fost rotit și vă permite să glisați la dreapta și la stânga.

Cu iOS, dimpotrivă, lucrurile nu sunt atât de lin. Browserul se comportă ca și cum containerul nu ar fi fost rotit deloc. Prin urmare, trebuie să folosiți glisări în sus și în jos pentru a derula, ceea ce este destul de ciudat. Overflow: ascuns nu rezolvă problema.

Concluzie

Potrivit Can I Use, transformările CSS sunt acum acceptate de peste 93% dintre utilizatori (în momentul scrierii acestui articol, noiembrie 2016). Nu ar trebui să fie o problemă aici.

Deși este mai bine să nu folosiți această metodă în producție. L-am testat pe unele dispozitive, dar departe de toate și nu atât de amănunțit.

Cel mai o problema mare- intrări tactile, în care trebuie să glisați în sus și în jos pentru a merge la stânga și la dreapta. O soluție ar fi să scrii o postare pe site cu o explicație, dar apoi trebuie să te bazezi pe utilizatori pentru a o citi. Și chiar și atunci va fi contrar bunului simț. O altă soluție este capturarea intrărilor tactile cu JS pe dispozitive, dar apoi este mai bine să scriem totul în JS și să renunțăm complet la hack-ul nostru CSS.

În acest articol, vom analiza în detaliu proprietatea overflow cu toate valorile sale, care vă permite, de asemenea, să adăugați sau să eliminați o bară de defilare orizontală / verticală. Cu alte cuvinte, cum să faci bare de defilare.

Overflow în CSS este responsabil pentru modul în care informațiile din bloc vor arăta dacă conținutul depășește înălțimea sau lățimea acestui bloc. Această proprietate se aplică numai pentru elemente de bloc(display : block ; sau cele care sunt inițial block - div și așa mai departe).

Valori posibile pe care le poate lua această proprietate (valorile implicite sunt vizibile):

• Vizibil - Se afișează întregul conținut al elementului, chiar și în afara înălțimii și lățimii setate.
• Ascuns - Numai zona din interiorul elementului este afișată, restul va fi ascuns.
• Defilare - Barele de defilare sunt întotdeauna adăugate.
• Auto - Scrollbars sunt adăugate numai atunci când este necesar.
• Moștenire - Moștenește valoarea părintelui.

Cel mai adesea, această proprietate este folosită pentru a elimina sau adăuga bare de defilare la un element. Așa sunt, de exemplu, manevrate ramele pentru a nu le înghesui la dimensiunea maximă. Sau pentru a introduce un text mare, astfel încât să nu ocupe o jumătate de pagină, ci să se așeze confortabil într-un bloc special și acolo să poată fi derulat și citit. În cea mai mare parte, proprietatea rezolvă problemele de afișare confortabilă a informațiilor.

În demonstrație, puteți vedea cum funcționează în practică fiecare dintre valorile proprietății:

cod HTML

body (marja: 0 0 0 0; padding: 0 0 60px 0; font-size: 16px;) h2 (culoare:#CC0033;) div ( lățime: 200px; /* lățime fixă*/inaltime:300px; /* înălțime fixă ​​*/ border:1px solid #555; umplutură: 4px; margine: 4px; plutește la stânga; ) .VisibleDiv (overflow:visible;) .HiddenDiv (overflow:hidden;) .ScrollDiv (overflow:scroll;) .AutoDiv (overflow:auto;)

Merită să acordați atenție faptului că, în acest caz particular, blocurile cu o înălțime și lățime fixă ​​date. Acest lucru este important, de exemplu, luați în considerare opțiunea când înălțimea blocului este setată la automat:

Vedem că textul în toate cazurile este corect afișat în interiorul blocului, cu excepția unui mic inconvenient în cazul scroll-ului, unde apar bare de defilare inactive.

Dar în acest caz există un mic pericol, întâlnit cu care mulți nu înțeleg de ce a apărut și cum să-l remedieze. Ideea este că dacă un bloc cu overflow : vizibil ; adică valoarea implicită, iar conținutul său are elemente cu oricare valoare flotantă, cu excepția niciunui , atunci toate acestea vor fi afișate incorect. Pentru a înțelege care este această situație, luați în considerare un exemplu:

Sub blocul VisibleDiv se află un alt bloc

Nu există nimic sub blocul VisibleDiv

body (marja: 0 0 0 0; umplutură: 0 0 60px 0; dimensiunea fontului: 16px;) h2 (culoare:#CC0033;) p (float:stânga;) div ( lățime: 500px; înălțime: automat; chenar: 1px solid #555; padding:4px; margin:4px; ) .VisibleDiv (overflow:visible;background: rgba(0,255,0,0.1);) .ignor (fundal: rgba(0,255,0,0.6); culoare:# FFFFFF;greutatea fontului:bold;)

În primul caz, este clar că conținutul cu proprietatea float iese în afara blocului și nu este luat în considerare de acesta la determinarea înălțimii blocului, în al doilea caz, sub blocul cu preaplin : vizibil ; un alt bloc este special plasat și vopsit într-o culoare diferită. Acestea nu sunt singurele exemple despre modul în care astfel de blocuri (cu overflow : vizibil ; și înălțime : auto ; ) se pot comporta pe pagină. Acest lucru se rezolvă prin înlocuirea valorii vizibile cu hidden , rețineți că această proprietate ar trebui specificată doar pentru blocurile cu înălțime : auto ; , dacă există o înălțime fixă, atunci există șanse mari ca conținutul să se ascundă pur și simplu dacă este mai mare decât înălțimea dată.

Iată cum ar arăta versiunea corectată:

De asemenea, nu vei avea o astfel de problemă dacă blocul cu overflow : vizibil ; si inaltime : auto ; dat o oarecare valoare proprietățile plutitoare. În general, în multe cazuri, afișarea elementelor depinde de un set de proprietăți, și nu de proprietăți individuale.

Instruire

Utilizați eticheta div dacă aveți nevoie de o bară de derulare nu pentru întreaga pagină, ci doar pentru o zonă limitată a acesteia. ÎN limbaj HTML(HyperText Markup Language - „hipertext markup language”) „etichetele” sunt comenzi individuale către browser pentru a afișa un anumit element al paginii. În chiar formă simplă o etichetă div (denumită adesea „strat”) astfel:

Aici - inchidere. Tot ceea ce este plasat între etichetele de deschidere și de închidere se află în strat ca într-un container, iar acestui container i se pot da dimensiuni - lățime și înălțime. Acest lucru se face folosind parametru suplimentar stil ("atribut"), care urmează în eticheta de deschidere: