overflow नियन्त्रण गर्छ कि जब कन्टेन्ट यसको बक्सको लागि धेरै ठूलो हुन्छ - चाहे यो क्लिप गरिन्छ, स्क्रल गर्छ, वा बाहिर निस्कन्छ।
{ : visible; }
{ : hidden; }
{ : scroll; }
{ : auto; }
.box {
overflow-x: hidden; /* clip horizontal */
overflow-y: auto; /* scroll vertical when needed */
}
एक सामान्य प्याटर्न: तेर्सो overflow रोक्न जबकि ठेर्सो स्क्रल अनुमति दिन।
.scroll-area {
max-height: 400px; /* constrain the height */
overflow-y: auto; /* content beyond 400px scrolls */
}
मूल कुरा: एक स्क्रल कन्टेनरलाई सीमित आकार (height/max-height) र overflow: auto चाहिन्छ। आकारको सीमा बिना, बक्स बढ्छ र कहिले पनि स्क्रल हुँदैन।
.clearfix { overflow: hidden; } /* contains floats / stops margin collapse */
overflow सेट गर्दा visible को अलावा अन्य कुरामा एक नयाँ block formatting context स्थापना हुन्छ, जसले फ्लोट गरिएको बच्चाहरूलाई समावेश गर्छ र margin collapsing रोक्छ — ऐतिहासिक रूपमा "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 JS बिना क्यारोसेल बनाउँछ; overscroll-behavior एक स्क्रल गरिएको प्यानेलले पनि यसको पछाडिको पृष्ठ स्क्रल गरेको रोक्छ (मोडल्स/चेट विन्डोहरूको लागि उत्तम)।
overflow स्क्रलिङ क्षेत्र, पाठ क्लिपिङ (text-overflow: ellipsis सहित), र modal/panel स्क्रल व्यवहार नियन्त्रण गर्छ।
स्क्रल कन्टेनरहरूलाई आकारको बाध्यता चाहिन्छ, overflow ले formatting context सिर्जना गर्छ, र आधुनिक सहायकहरू (scroll-snap, overscroll-behavior) जान्दै overflow वरिपरि व्यावहारिक layout र UX आवश्यकताहरू कभर गर्छ।
विस्तृत उत्तरसहित IT अन्तर्वार्ता प्रश्नहरूको पुस्तकालय — जुनियरदेखि सिनियरसम्म।
दान गर्नुहोस्