ఈ కథనం అనేక ఉదాహరణలతో CSS ఓవర్ఫ్లో-y ప్రాపర్టీ వినియోగాన్ని ప్రదర్శిస్తుంది.
CSSలో ఓవర్ఫ్లో-y ప్రాపర్టీని ఎలా ఉపయోగించాలి?
CSS' ఓవర్ఫ్లో-y ”ఒక మూలకంలోని క్రాస్-యాక్సిస్‌తో పాటు కంటెంట్ ఓవర్‌ఫ్లోయింగ్‌ను నియంత్రించడానికి ప్రాపర్టీ ఉపయోగించబడుతుంది. కంటెంట్ కంటైనర్ ఎత్తును మించి ఉన్నప్పుడు కంటెంట్‌ను క్లిప్ చేయాలా లేదా స్క్రోల్‌బార్‌ను జోడించాలా అని ఇది నిర్దేశిస్తుంది. ఈ ఆస్తికి సాధ్యమయ్యే విలువలు ' కనిపించే ',' దాచబడింది ',' స్క్రోల్ చేయండి ', మరియు' దానంతట అదే ”.
ఓవర్ఫ్లో-y ప్రాపర్టీ యొక్క మెరుగైన ప్రదర్శన కోసం దిగువ ఉదాహరణలను సందర్శిద్దాం:
ఉదాహరణ 1: ఓవర్ఫ్లో-y ప్రాపర్టీకి విజిబుల్‌ని విలువగా ఉపయోగించడం
ది ' కనిపించే ” విలువ కంటెంట్‌ను కంటైనర్ నుండి ఓవర్ఫ్లో చేయడానికి అనుమతిస్తుంది మరియు క్లిప్పింగ్ లేదా స్క్రోల్‌బార్‌లను జోడించదు. దిగువ ప్రాక్టికల్ కోడ్ బ్లాక్‌ని సందర్శించండి:
>
>
>
పై కోడ్ బ్లాక్ యొక్క వివరణ:
- ముందుగా, '' విలువను కేటాయించండి తల్లిదండ్రులు ' కు ' తరగతి 'లక్షణం మరియు ఉపయోగించు' శైలి ' గుణం.
- అదనంగా, '' విలువను అందించండి కనిపించే 'CSSకి' ఓవర్ఫ్లో-y ”ఆస్తి. మరియు దానిని 'కి సమానంగా సెట్ చేయండి శైలి ” CSS స్టైలింగ్ పని చేసేలా చేసే లక్షణం.
- తరువాత, ఒక సమూహాన్ని సృష్టించండి ' div 'మూలకం మరియు దానికి ఒక తరగతిని కేటాయించండి' పిల్లల కంటెంట్ ”. అలాగే, దానికి డమ్మీ డేటాను అందించండి.
ఇప్పుడు, CSS ఓవర్ఫ్లో-y ప్రాపర్టీని బాగా అర్థం చేసుకోవడంలో సహాయపడే విజువలైజేషన్‌ని మెరుగుపరచడానికి CSS లక్షణాలను ఉపయోగించండి:
.తల్లిదండ్రులు {వెడల్పు : 200px ;
ఎత్తు : 150px ;
సరిహద్దు : 1px ఘనమైన నలుపు ;
}
.పిల్లల కంటెంట్ {
ఎత్తు : 300px ;
నేపథ్య రంగు : లేత నీలం ;
}
CSS లక్షణాల వివరణ క్రింద ఇవ్వబడింది:
- మొదట, ' తల్లిదండ్రులు 'తరగతి ఎంచుకోబడింది మరియు విలువలు' 200px ',' 150px ', మరియు' 1px ఘన నలుపు 'CSSకి కేటాయించబడ్డాయి' వెడల్పు ',' ఎత్తు ', మరియు' సరిహద్దు ” లక్షణాలు, వరుసగా.
- తరువాత, 'ని ఎంచుకోండి పిల్లల కంటెంట్ 'తరగతి మరియు విలువలను సెట్ చేయండి' 300px 'మరియు' లేత నీలం 'CSSకి' ఎత్తు 'మరియు' నేపథ్య రంగు ” లక్షణాలు, వరుసగా. ఈ తరగతి ' తల్లిదండ్రులు 'CSSచే నియంత్రించబడే తరగతి' పొంగిపొర్లుతున్నాయి ”ఆస్తి.
కోడ్ స్నిప్పెట్‌ల సంకలనం తర్వాత, వెబ్‌పేజీ ఇలా కనిపిస్తుంది:
స్నాప్‌షాట్ ఓవర్ఫ్లో కంటెంట్ ఇప్పుడు కనిపిస్తుంది మరియు స్క్రోల్‌బార్ లేదా క్లిప్పింగ్ డిఫాల్ట్‌గా జోడించబడదు.
ఉదాహరణ 2: ఓవర్ఫ్లో-y ప్రాపర్టీకి హిడెన్‌ని విలువగా ఉపయోగించడం
ది ' ఓవర్ఫ్లో-y 'విలువతో ఆస్తి' దాచబడింది ” దాని పేరెంట్ కంటైనర్ వెలుపల కదిలే మొత్తం కంటెంట్‌ను దాచిపెడుతుంది. ఈ ప్రాపర్టీ స్క్రోల్‌బార్‌లను జోడించదు బదులుగా ఇది ఓవర్ఫ్లో అయిన కంటెంట్‌ను క్లిప్ చేసింది:
>
>
ఎగువ కోడ్ స్నిప్పెట్ కలిగి ఉంది:
- ముందుగా, అంతర్గత div మూలకం లోపల ఉంచిన డమ్మీ కంటెంట్ పెరుగుదలతో అదే కోడ్ మళ్లీ చొప్పించబడుతుంది.
- తరువాత, '' విలువను మార్చండి ఓవర్ఫ్లో-y 'ఆస్తి' దాచబడింది ' కు ' 'ట్యాగ్' తరగతిని కలిగి ఉంది తల్లిదండ్రులు ”.
రీ-రెండర్ చేసిన తర్వాత వెబ్‌పేజీ ఇలా కనిపిస్తుంది:
ఓవర్ఫ్లో కంటెంట్ క్లిప్ చేయబడిందని స్నాప్‌షాట్ ప్రదర్శిస్తుంది.
ఉదాహరణ 3: ఓవర్ఫ్లో-y ప్రాపర్టీ కోసం స్క్రోల్‌ని విలువగా ఉపయోగించడం
విలువను సెట్ చేస్తోంది ' ఓవర్ఫ్లో-y 'ఆస్తి' స్క్రోల్ చేయండి ” ద్వారా స్క్రోల్ చేయడానికి తుది వినియోగదారుని అనుమతిస్తుంది
అది పొంగిపొర్లుతున్న కంటెంట్. దిగువ కోడ్ బ్లాక్‌ని సందర్శిద్దాం:
= 'తల్లిదండ్రులు' శైలి = 'ఓవర్ఫ్లో-y: స్క్రోల్;' >
= 'పిల్లల కంటెంట్' > ఇది కేవలం డమ్మీ విషయము ఓవర్ఫ్లో-y ప్రాపర్టీ కనిపించేలా సెట్ చేయబడినప్పుడు దాని ప్రదర్శన కోసం ఉపయోగించబడుతుంది. ఇది కేవలం డమ్మీ విషయము ఓవర్ఫ్లో-y ప్రాపర్టీ కనిపించేలా సెట్ చేయబడినప్పుడు దాని ప్రదర్శన కోసం ఉపయోగించబడుతుంది.
>
>పై కోడ్ బ్లాక్‌లో:
- మొదట, '' లోపల అదే HTML నిర్మాణం చొప్పించబడింది. <బాడీ> ” ట్యాగ్.
- తరువాత, '' విలువను మార్చండి ఓవర్ఫ్లో-y 'ఆస్తి' స్క్రోల్ చేయండి ”. ఇది అనుమతిస్తుంది ' తల్లిదండ్రులు ” ఓవర్ఫ్లో అయిన కంటెంట్‌ని నియంత్రించడానికి స్క్రోలింగ్ ప్రభావాన్ని ఎనేబుల్ చేయడానికి div.
పై కోడ్ బ్లాక్‌ని సంకలనం చేసిన తర్వాత, వెబ్‌పేజీ ఇలా కనిపిస్తుంది:
ఓవర్ఫ్లో అయిన కంటెంట్‌ను నియంత్రించడానికి స్క్రోలింగ్ ప్రభావం అందుబాటులో ఉందని పై gid వివరిస్తుంది.
ఉదాహరణ 4: ఓవర్ఫ్లో-y ప్రాపర్టీకి ఆటోను విలువగా ఉపయోగించడం
ఈ ఉదాహరణలో, కంటెంట్ కంటైనర్‌లో సరిపోకపోతే మాత్రమే వినియోగదారులు స్క్రోల్‌బార్‌ను జోడించగలరు. అలాగే, కంటెంట్ ఓవర్ఫ్లో కాకపోతే స్క్రోల్‌బార్ జోడించబడదు. విలువను అందించడం ద్వారా ఇది సాధ్యమవుతుంది ' దానంతట అదే 'CSSకి' ఓవర్ఫ్లో-y 'ఆస్తి:
= 'తల్లిదండ్రులు' శైలి = 'ఓవర్ఫ్లో-y: ఆటో;' >
= 'పిల్లల కంటెంట్' > ఇది కేవలం డమ్మీ విషయము ఓవర్ఫ్లో-y ప్రాపర్టీ కనిపించేలా సెట్ చేయబడినప్పుడు దాని ప్రదర్శన కోసం ఉపయోగించబడుతుంది. ఇది కేవలం డమ్మీ విషయము ఓవర్ఫ్లో-y ప్రాపర్టీ కనిపించేలా సెట్ చేయబడినప్పుడు దాని ప్రదర్శన కోసం ఉపయోగించబడుతుంది.
>
>పై కోడ్ బ్లాక్‌లో:
- ముందుగా, '' లోపల అదే HTML ఫైల్‌ను చొప్పించండి <బాడీ> ” ట్యాగ్.
- తరువాత, ' విలువను నవీకరించండి ఓవర్ఫ్లో-y 'ఆస్తి' దానంతట అదే ”. ఇది కంటెంట్ యొక్క నిలువు పొడవుకు సంబంధించి స్క్రోలింగ్ ప్రభావాన్ని ప్రారంభిస్తుంది.
సంకలన ప్రక్రియ ముగిసిన తర్వాత, వెబ్‌పేజీ ఇలా పనిచేస్తుంది:
ఎగువ gif కంటెంట్ పొడవు ప్రకారం స్క్రోల్‌బార్‌ను ప్రారంభించిన ఓవర్ఫ్లో ప్రాపర్టీని ప్రదర్శిస్తుంది.
ముగింపు
CSS' ఓవర్ఫ్లో-y ”ఒక మూలకంలోని క్రాస్-యాక్సిస్‌తో నిండిన కంటెంట్‌ని నియంత్రించడానికి ప్రాపర్టీ ఉపయోగించబడుతుంది. ఓవర్ఫ్లో-y ప్రాపర్టీ ఓవర్ఫ్లో-y ప్రాపర్టీలకు అందించిన నిర్దిష్ట విలువ ప్రకారం కంటెంట్‌ని నియంత్రిస్తుంది. ది ' దృశ్య 'విలువ నిండిన కంటెంట్‌ను ప్రదర్శిస్తుంది, ' దాచబడింది ” విలువ ఓవర్ఫ్లో కంటెంట్‌ను దాచిపెడుతుంది మరియు “ స్క్రోల్ చేయండి ” విలువ కంటెంట్‌ని నియంత్రించడానికి స్క్రోల్‌బార్‌ని జోడిస్తుంది. మరియు విలువ ఉంటే ' దానంతట అదే ” కంటెంట్ పొడవు ప్రకారం స్క్రోల్ బార్ జోడిస్తుంది లేదా తీసివేస్తుంది.