overflow yana sarrafa abin da ya faru lokacin da abun ya yi babbar girma ga akwatinsa — ko an yanke shi, ko ya yi scrollin, ko ya baje ko ya fito.
{ : visible; }
{ : hidden; }
{ : scroll; }
{ : auto; }
.box {
overflow-x: hidden; /* clip horizontal */
overflow-y: auto; /* scroll vertical when needed */
}
Albarka mai saba: hana overflow na gida yayin da ake barin scroll na tsaye.
.scroll-area {
max-height: 400px; /* constrain the height */
overflow-y: auto; /* content beyond 400px scrolls */
}
Makullin aiki: scroll container yana bukatar size mai iyaka (height/max-height) da overflow: auto. A bai yi karancin size ba, akwatin shi kawai ya haɓaka ba kuma ba ya yi scrollin.
.clearfix { overflow: hidden; } /* contains floats / stops margin collapse */
Saita overflow zuwa kome sai visible yana aiki sabon block formatting context, wanda ya dauke jariyan floated yara da ya hana margin collapsing — a gida an yi amfani da shi azaman "clearfix".
.gallery {
overflow-x: auto;
scroll-snap-type: x mandatory; /* snap to items while scrolling */
overscroll-behavior: contain; /* stop scroll "chaining" to the page */
}
.gallery > * { scroll-snap-align: start; }
scroll-snap yana gina carousel ba tare da JS ba; overscroll-behavior ya dakila panel mai scroll daga scrollin shafin da ya fito (ya yi kyau sosai don modals/chat windows).
overflow yana tawali da scroll areas, yanke rubutu (tare da text-overflow: ellipsis), da modal/panel scroll jiya.
Sanin cewa scroll containers suna bukatar size constraint, cewa overflow yana tsara formatting context, da kuma modern taimaki (scroll-snap, overscroll-behavior) yana rufe aiwatacciyar layout da UX bukatun kusa da overflow.
Ɗakin karatu na tambayoyin hira na IT tare da amsoshi cikakke — daga Junior zuwa Senior.
Ba da Gudummawa