CSS „ revărsare ” este utilizată pentru a controla depășirea conținutului pentru elementul HTML selectat. Conținutul poate fi controlat într-o direcție specifică cu ajutorul „ preaplin-y ' și ' preaplin-x ” proprietăți. Proprietatea „overflow” acceptă valori precum „ sul ”, “ vizibil ”, “ ascuns ' și ' auto ” și diferă ca funcționalitate unul față de celălalt. Cu toate acestea, acest ghid demonstrează diferența dintre overflow:scroll și overflow:auto folosind exemple practice.
Cum diferă overflow:scroll de overflow:auto?
Principala diferență dintre „ sul ' și ' auto ” este că valoarea ” overflow: defilare ” afișează întotdeauna o bară de derulare, indiferent dacă este necesar sau nu, ceea ce creează o distragere vizuală. Pe de altă parte, „ overflow:auto ” afișează bara de derulare numai când conținutul este depășit. În acest fel, poate fi creat un design mai curat și mai raționalizat, care atrage cu ușurință atenția utilizatorului.
Exemplul 1: Utilizarea proprietății overflow:scroll
CSS „ overflow: defilare ” proprietate setează bara de derulare în mod implicit pentru a controla conținutul depășit. Nu vede conținutul overflow și apoi aplică bara de defilare. În schimb, afișează o bară de defilare orizontală și verticală după compilarea codului, dar utilizatorul poate modifica și afișa doar o bară de defilare laterală în funcție de cerințele designului.
Accesați codul de mai jos pentru a utiliza proprietatea „overflow:scroll”:
< div >
< h3 > Exemplu pentru Overflow: defilare h3 >
< div clasă = „scrollingBox scroll” >
< p > Acesta este doar conținut fals utilizat pentru demonstrarea diferenței dintre derulare a valorii proprietății overflow-y și auto.
p >
div >
div >
În blocul de cod de mai sus:
- În primul rând, rădăcina „ div ” este creat și utilizează elementul „ imbricat ” etichetă în ea.
- Apoi, atribuiți clasele de „ scrollingBox ' și ' sul „ la imbricatul „ deja creat
' etichetă.- În cele din urmă, furnizați date fictive către „ ' și ' „etichete în interiorul „ div ” elemente.
După crearea structurii HTML, aplicați proprietatea CSS overflow:
< stil >
.scrollingBox {
latime: 300px;
înălțime: 150px;
chenar: 1px solid gri închis;
}
.sul {
preaplin: defilare;
}
stil >Descrierea codului CSS de mai sus:
- Mai întâi, selectați „ scrollingBox ” și furnizați valorile lui ” 300px ”, “ 150px ' și ' 1px gri închis solid ” la CSS ” lăţime ”, “ înălţime ', și ' frontieră ” proprietăți. Aceste proprietăți sunt utilizate pentru un proces de vizualizare mai bun.
- În continuare, „ sul ” este selectată, iar valoarea “ sul ” este transmis la CSS „ revărsare ” proprietate.
După încheierea fazei de compilare:
Ieșirea de mai sus arată că conținutul nu depășește, dar bara de defilare a fost adăugată atât pe axa X, cât și pe axa Y.
Exemplul 2: Utilizarea overflow:auto Property
Proprietatea overflow:auto este ca overflow:scroll, deoarece ambele pot afișa bara de defilare. Singura diferență este că „ overflow:auto ” adaugă o bară de defilare atunci când conținutul este depășit și dacă conținutul nu este depășit, atunci bara de derulare nu este adăugată. Este folosit mai ales în timpul creării de design web receptiv datorită naturii sale în schimbare dinamică.
De exemplu, accesați codul de mai jos:
< div clasă = 'exemplu automat' >
< h3 > Exemplu pentru Overflow: automat h3 >
< div clasă = „scrollingBox” stil = „overflow: automat” >
< p > Acesta este doar conținut fals utilizat pentru demonstrarea diferenței dintre derulare a valorii proprietății overflow-y și auto.
p >
div >
div >În blocul de cod de mai sus:
- În primul rând, se utilizează aceeași structură HTML, iar datele fictive furnizate către „ h3 ', și ' p ” elementele sunt schimbate.
- În continuare, „ stil „Atributul este utilizat cu imbricatul interior „ div ” și setează valoarea lui “ auto ” la CSS ” revărsare ” proprietate.
După execuție, „ div ” elementul apare acum astfel:
Instantaneul de mai sus arată că bara de derulare nu este adăugată în funcție de lungimea conținutului.
Acum, doar pentru puțin mai multă claritate despre „ overflow:auto ” proprietate. Încercați să furnizați o cantitate mare de date la „imbricat” div ' element. După actualizarea codului, pagina web arată astfel:
Ieșirea confirmă că bara de derulare este acum adăugată din cauza prezenței conținutului de overflow.
Concluzie
„ overflow: defilare ' și ' overflow:auto ” proprietățile diferă în situația în care adaugă bara de derulare. „Overflow:scroll” arată întotdeauna o bară de defilare indiferent dacă conținutul este depășit sau nu. În timp ce „overflow:auto” arată o bară de defilare numai atunci când conținutul elementului HTML selectat este depășit. Valoarea CSS „ revărsare ”proprietatea depinde de designul specific și de cerințele experienței utilizatorului. Acest articol a demonstrat diferența dintre proprietățile „overflow:scroll” și „overflow:auto”.
- Apoi, atribuiți clasele de „ scrollingBox ' și ' sul „ la imbricatul „ deja creat