దృశ్యం దాదాపు ఎల్లప్పుడూ ఒకే విధంగా ఉంటుంది, ఇది స్క్రోల్ చేయగల కంటైనర్లోని డేటా టేబుల్. ప్రతి అడ్డు వరుసలో యాక్షన్ మెను ఉంటుంది, సవరించడం, నకిలీ చేయడం మరియు తొలగించడం వంటి కొన్ని ఎంపికలతో కూడిన చిన్న డ్రాప్డౌన్. మీరు దీన్ని నిర్మించారు, ఇది ఐసోలేషన్లో ఖచ్చితంగా పని చేస్తున్నట్లు అనిపిస్తుంది, ఆపై ఎవరైనా దానిని స్క్రోల్ చేయదగిన డివిలో ఉంచారు మరియు విషయాలు విడిపోతాయి. నేను ఈ ఖచ్చితమైన బగ్ని మూడు వేర్వేరు కోడ్బేస్లలో చూశాను: కంటైనర్, స్టాక్ మరియు ఫ్రేమ్వర్క్, అన్నీ విభిన్నమైనవి. బగ్, అయితే, పూర్తిగా ఒకేలా ఉంటుంది. డ్రాప్డౌన్ కంటైనర్ అంచు వద్ద క్లిప్ చేయబడుతుంది. లేదా తార్కికంగా దాని క్రింద ఉండవలసిన కంటెంట్ వెనుక అది చూపబడుతుంది. లేదా వినియోగదారు స్క్రోల్ చేసే వరకు ఇది బాగా పని చేస్తుంది, ఆపై అది డ్రిఫ్ట్ అవుతుంది. మీరు z-ఇండెక్స్ను చేరుకుంటారు: 9999. కొన్నిసార్లు ఇది సహాయపడుతుంది, కానీ ఇతర సమయాల్లో ఇది ఖచ్చితంగా ఏమీ చేయదు. ఆ అస్థిరత లోతైన ఏదో జరుగుతోందని మొదటి క్లూ. ఇది తిరిగి వస్తూ ఉండటానికి కారణం మూడు వేర్వేరు బ్రౌజర్ సిస్టమ్లు చేరి ఉన్నాయి మరియు చాలా మంది డెవలపర్లు ప్రతి ఒక్కటి స్వంతంగా అర్థం చేసుకుంటారు కానీ మూడూ ఢీకొన్నప్పుడు ఏమి జరుగుతుందో ఆలోచించరు: ఓవర్ఫ్లో, స్టాకింగ్ సందర్భాలు మరియు బ్లాక్లను కలిగి ఉంటాయి.
మూడూ ఎలా పరస్పరం వ్యవహరిస్తాయో మీరు అర్థం చేసుకున్న తర్వాత, వైఫల్య మోడ్లు యాదృచ్ఛికంగా అనుభూతి చెందుతాయి. నిజానికి, అవి ఊహించదగినవిగా మారతాయి. వాస్తవానికి దీనికి కారణమయ్యే మూడు విషయాలు వాటిలో ప్రతి ఒక్కటి వివరంగా చూద్దాం. ఓవర్ఫ్లో సమస్య మీరు ఓవర్ఫ్లో: దాచిన, ఓవర్ఫ్లో: స్క్రోల్ లేదా ఓవర్ఫ్లో: ఎలిమెంట్పై స్వయంచాలకంగా సెట్ చేసినప్పుడు, బ్రౌజర్ దాని పరిమితికి మించి విస్తరించి ఉన్న ఏదైనా క్లిప్ చేస్తుంది, దానితో పాటు ఖచ్చితంగా ఉంచబడిన వారసులు. .స్క్రోల్-కంటైనర్ { ఓవర్ఫ్లో: ఆటో; ఎత్తు: 300px; /* ఇది డ్రాప్డౌన్ను క్లిప్ చేస్తుంది, ఫుల్ స్టాప్ */ }
.dropdown { స్థానం: సంపూర్ణ; /* పర్వాలేదు -- ఇప్పటికీ .scroll-container ద్వారా క్లిప్ చేయబడింది */ }
నేను మొదటిసారి పరిగెత్తినప్పుడు అది నన్ను ఆశ్చర్యపరిచింది. నేను స్థానం ఊహించాను: సంపూర్ణంగా ఒక మూలకాన్ని కంటైనర్ క్లిప్పింగ్ నుండి తప్పించుకోవడానికి అనుమతిస్తుంది. అది లేదు. ఆచరణలో, అంటే, ఆ పూర్వీకులు మెను కలిగి ఉన్న బ్లాక్ కానప్పటికీ, కనిపించని ఓవర్ఫ్లో విలువను కలిగి ఉన్న ఏదైనా పూర్వీకుల ద్వారా ఖచ్చితంగా ఉంచబడిన మెనూని కత్తిరించవచ్చు. క్లిప్పింగ్ మరియు పొజిషనింగ్ అనేది ప్రత్యేక వ్యవస్థలు. మీరు రెండింటినీ అర్థం చేసుకునే వరకు అవి పూర్తిగా యాదృచ్ఛికంగా కనిపించే మార్గాల్లో ఢీకొంటాయి.
క్రియేట్పోర్టల్ని ఉపయోగించే రియాక్ట్ ఉదాహరణ ఇక్కడ ఉంది:
'react-dom' నుండి { createPortal } దిగుమతి; 'రియాక్ట్' నుండి {useState, useEffect, useRef}ని దిగుమతి చేయండి;
ఫంక్షన్ డ్రాప్డౌన్({ anchorRef, isOpen, పిల్లలు }) { const [స్థానం, సెట్పొజిషన్] = యూజ్స్టేట్ ({పైన: 0, ఎడమ: 0});
useEffect(() => { ఉంటే (isOpen && anchorRef.current) { const rect = anchorRef.current.getBoundingClientRect(); సెట్ పొజిషన్({ పైన: rect.bottom + window.scrollY, ఎడమ: rect.left + window.scrollX, }); } }, [isOpen, anchorRef]);
ఒకవేళ (! isOpen) తిరిగి శూన్యం;
రిటర్న్ క్రియేట్ పోర్టల్(
మరియు, వాస్తవానికి, మేము ప్రాప్యతను విస్మరించలేము. కంటెంట్పై కనిపించే స్థిర ఎలిమెంట్లు ఇప్పటికీ కీబోర్డ్కు అందుబాటులో ఉండాలి. ఫోకస్ ఆర్డర్ సహజంగా స్థిర డ్రాప్డౌన్లోకి వెళ్లకపోతే, మీరు దానిని కోడ్ని ఉపయోగించి నిర్వహించాలి. ఇది ఇతర ఇంటరాక్టివ్ కంటెంట్ను తీసివేయడానికి మార్గం లేకుండా కూర్చోదని కూడా తనిఖీ చేయడం విలువైనదే. కీబోర్డ్ టెస్టింగ్లో అది మిమ్మల్ని కరిచింది. CSS యాంకర్ పొజిషనింగ్: ఇది ఎక్కడికి వెళుతోంది అని నేను అనుకుంటున్నాను CSS యాంకర్ పొజిషనింగ్ అనేది ప్రస్తుతం నాకు చాలా ఆసక్తిగా ఉన్న దిశ. నేను మొదటిసారి చూసినప్పుడు స్పెక్ ఎంతవరకు ఉపయోగించబడుతుందో నాకు ఖచ్చితంగా తెలియదు. ఇది నేరుగా CSSలో డ్రాప్డౌన్ మరియు దాని ట్రిగ్గర్ మధ్య సంబంధాన్ని ప్రకటించడానికి మిమ్మల్ని అనుమతిస్తుంది మరియు బ్రౌజర్ కోఆర్డినేట్లను నిర్వహిస్తుంది. .ట్రిగ్గర్ { యాంకర్-పేరు: --నా-ట్రిగ్గర్; }
.dropdown-menu { స్థానం: సంపూర్ణ; స్థానం-యాంకర్: --నా-ట్రిగ్గర్; ఎగువ: యాంకర్ (దిగువ); ఎడమ: యాంకర్ (ఎడమ); స్థానం-ప్రయత్నం-ఫాల్బ్యాక్లు: ఫ్లిప్-బ్లాక్, ఫ్లిప్-ఇన్లైన్; }
పొజిషన్-ట్రై-ఫాల్బ్యాక్స్ ప్రాపర్టీ అనేది మాన్యువల్ లెక్కింపులో ఉపయోగించడం విలువైనదిగా చేస్తుంది. బ్రౌజర్ వదులుకునే ముందు ప్రత్యామ్నాయ ప్లేస్మెంట్లను ప్రయత్నిస్తుంది, కాబట్టి వీక్షణపోర్ట్ దిగువన ఉన్న డ్రాప్డౌన్ కత్తిరించబడటానికి బదులుగా స్వయంచాలకంగా పైకి ఎగరుతుంది. Chromium-ఆధారిత బ్రౌజర్లలో బ్రౌజర్ మద్దతు పటిష్టంగా ఉంది మరియు Safariలో పెరుగుతోంది. Firefoxకి పాలీఫిల్ అవసరం. @oddbird/css-anchor-positioning ప్యాకేజీ కోర్ స్పెక్ను కవర్ చేస్తుంది. నేను ఊహించని ఫాల్బ్యాక్లు అవసరమయ్యే లేఅవుట్ ఎడ్జ్ కేస్లను నేను కొట్టాను, కాబట్టి దీనిని ప్రోగ్రెసివ్ మెరుగుదలగా పరిగణించండి లేదా దానితో జత చేయండిFirefox కోసం JavaScript ఫాల్బ్యాక్. సంక్షిప్తంగా, ఆశాజనకంగా ఉంది కానీ ఇంకా విశ్వవ్యాప్తం కాదు. మీ లక్ష్య బ్రౌజర్లలో పరీక్షించండి. మరియు యాక్సెసిబిలిటీకి సంబంధించినంతవరకు, CSSలో విజువల్ రిలేషన్షిప్ ప్రకటించడం వల్ల యాక్సెస్బిలిటీ ట్రీకి ఏమీ చెప్పదు. ఏరియా-నియంత్రణలు, ఏరియా-విస్తరింపబడిన, ఏరియా-హాస్పోపప్ — ఆ భాగం ఇప్పటికీ మీపై ఉంది. కొన్నిసార్లు ది ఫిక్స్ జస్ట్ మూవింగ్ ది ఎలిమెంట్ పోర్టల్ను చేరుకోవడానికి లేదా కోఆర్డినేట్ లెక్కలు చేయడానికి ముందు, నేను ఎల్లప్పుడూ ముందుగా ఒక ప్రశ్న అడుగుతాను: ఈ డ్రాప్డౌన్ వాస్తవానికి స్క్రోల్ కంటైనర్లో నివసించాల్సిన అవసరం ఉందా? అలా చేయకపోతే, మార్కప్ను ఉన్నత-స్థాయి రేపర్కి తరలించడం వలన జావాస్క్రిప్ట్ మరియు సమన్వయ గణనలు లేకుండా సమస్యను పూర్తిగా తొలగిస్తుంది. ఇది ఎల్లప్పుడూ సాధ్యం కాదు. బటన్ మరియు డ్రాప్డౌన్ ఒకే కాంపోనెంట్లో ఎన్క్యాప్సులేట్ చేయబడితే, ఒకదానిని మరొకటి లేకుండా తరలించడం అంటే మొత్తం APIని పునరాలోచించడం. కానీ మీరు దీన్ని చేయగలిగినప్పుడు, డీబగ్ చేయడానికి ఏమీ లేదు. సమస్య కేవలం ఉనికిలో లేదు. ఆధునిక CSS ఇప్పటికీ ఏమి పరిష్కరించలేదు CSS ఇక్కడ చాలా ముందుకు వచ్చింది, కానీ అది మిమ్మల్ని నిరాశపరిచే స్థలాలు ఇంకా ఉన్నాయి. స్థానం: స్థిర మరియు పరివర్తన సమస్యలు ఇప్పటికీ ఉన్నాయి. ఇది ఉద్దేశపూర్వకంగా స్పెక్లో ఉంది, అంటే CSS ప్రత్యామ్నాయం లేదు. మీరు మీ లేఅవుట్ను రూపాంతరం చెందిన మూలకంలో చుట్టే యానిమేషన్ లైబ్రరీని ఉపయోగిస్తుంటే, మీకు పోర్టల్లు లేదా యాంకర్ పొజిషనింగ్ అవసరం అవుతుంది. CSS యాంకర్ పొజిషనింగ్ ఆశాజనకంగా ఉంది, కానీ కొత్తది. ఇంతకు ముందే చెప్పినట్లుగా, నేను దీన్ని వ్రాస్తున్న సమయంలో Firefoxకి ఇప్పటికీ పాలీఫిల్ అవసరం. నేను ఊహించని ఫాల్బ్యాక్లు అవసరమయ్యే లేఅవుట్ అంచు కేసులను నేను కొట్టాను. మీకు ఈ రోజు అన్ని బ్రౌజర్లలో స్థిరమైన ప్రవర్తన అవసరమైతే, మీరు ఇప్పటికీ గమ్మత్తైన భాగాల కోసం JavaScript కోసం చేరుకుంటున్నారు. నేను నా వర్క్ఫ్లోను మార్చిన అదనంగా HTML Popover API, ఇప్పుడు అన్ని ఆధునిక బ్రౌజర్లలో అందుబాటులో ఉంది. పాప్ఓవర్ అట్రిబ్యూట్ ఉన్న ఎలిమెంట్లు బ్రౌజర్లోని టాప్ లేయర్లో రెండర్ అవుతాయి, అన్నింటికీ పైన, జావాస్క్రిప్ట్ పొజిషనింగ్ అవసరం లేదు.
టూల్టిప్లు, డిస్క్లోజర్ విడ్జెట్లు మరియు సాధారణ అతివ్యాప్తి వంటి వాటి కోసం ఎస్కేప్ హ్యాండ్లింగ్, డిస్మిస్ ఆన్ క్లిక్ అవుట్సైడ్ మరియు సాలిడ్ యాక్సెసిబిలిటీ సెమాంటిక్స్ ఉచితంగా వస్తాయి. ఇది నేను ఇప్పుడు చేరుకునే మొదటి సాధనం. ఇది స్థానాలను పరిష్కరించదు. ఇది పొరలను పరిష్కరిస్తుంది. పాప్ఓవర్ను దాని ట్రిగ్గర్కు సమలేఖనం చేయడానికి మీకు ఇప్పటికీ యాంకర్ పొజిషనింగ్ లేదా జావాస్క్రిప్ట్ అవసరం. Popover API లేయరింగ్ను నిర్వహిస్తుంది. యాంకర్ పొజిషనింగ్ ప్లేస్మెంట్ను నిర్వహిస్తుంది. కలిసి ఉపయోగించినట్లయితే, లైబ్రరీ కోసం మీరు ఇంతకు ముందు చేయాలనుకున్న వాటిలో చాలా వాటిని కవర్ చేస్తాయి. మీ పరిస్థితి కోసం ఒక నిర్ణయ మార్గదర్శి వీటన్నింటిని కష్టతరం చేసిన తర్వాత, ఇప్పుడు నేను ఎంపిక గురించి ఎలా ఆలోచిస్తున్నాను.
పోర్టల్ని ఉపయోగించండి. ట్రిగ్గర్ సమూహ స్క్రోల్ కంటైనర్లలో లోతుగా ఉన్నప్పుడు నేను దీన్ని ఉపయోగిస్తాను. నేను టేబుల్ యాక్షన్ మెనుల కోసం ఈ నమూనాను ఉపయోగించాను మరియు ఫోకస్ పునరుద్ధరణ మరియు యాక్సెసిబిలిటీ తనిఖీలతో దీన్ని జత చేసాను. ఇది అత్యంత నమ్మదగిన ఎంపిక, కానీ అదనపు వైరింగ్ కోసం బడ్జెట్ సమయం. ఫిక్స్డ్ పొజిషనింగ్ని ఉపయోగించండి. మీరు వెనిలా జావాస్క్రిప్ట్ లేదా తేలికపాటి ఫ్రేమ్వర్క్లో ఉన్నప్పుడు మరియు ఏ పూర్వీకులు ట్రాన్స్ఫార్మ్లు లేదా ఫిల్టర్లను వర్తింపజేయలేదని ధృవీకరించవచ్చు. ఇది సెటప్ చేయడం సులభం మరియు డీబగ్ చేయడం సులభం, ఆ ఒక అడ్డంకి ఉన్నంత వరకు. CSS యాంకర్ పొజిషనింగ్ని ఉపయోగించండి.మీ బ్రౌజర్ మద్దతు అనుమతించినప్పుడు దీని కోసం చేరుకోండి. Firefox మద్దతు అవసరమైతే, @oddbird polyfillతో జత చేయండి. ప్లాట్ఫారమ్ అంతిమంగా ఇక్కడే వెళుతోంది మరియు చివరికి మీ గో-టు విధానం అవుతుంది. DOMని పునర్నిర్మించండి.ఆర్కిటెక్చర్ దీన్ని అనుమతించినప్పుడు దీన్ని ఉపయోగించండి మరియు మీకు సున్నా రన్టైమ్ సంక్లిష్టత కావాలి. ఇది చాలా తక్కువగా అంచనా వేయబడిన ఎంపిక అని నేను నమ్ముతున్నాను. నమూనాలను కలపండి. మద్దతు లేని బ్రౌజర్ల కోసం జావాస్క్రిప్ట్ ఫాల్బ్యాక్తో జత చేయబడిన మీ ప్రాథమిక విధానంగా యాంకర్ పొజిషనింగ్ కావాలనుకున్నప్పుడు దీన్ని చేయండి. లేదా సమన్వయ ఖచ్చితత్వం కోసం getBoundingClientRect()తో జత చేసిన DOM ప్లేస్మెంట్ కోసం పోర్టల్.
తీర్మానం నేను ఈ బగ్ని వన్-ఆఫ్ ఇష్యూగా పరిగణిస్తాను — పాచ్ చేయడానికి మరియు ముందుకు వెళ్లడానికి. కానీ ఒకసారి నేను దానితో చాలా సేపు కూర్చున్నాను - ఓవర్ఫ్లో క్లిప్పింగ్, స్టాకింగ్ కాంటెక్స్ట్లు మరియు బ్లాక్లను కలిగి ఉన్న మూడు సిస్టమ్లను అర్థం చేసుకోవడానికి - ఇది యాదృచ్ఛికంగా అనిపించడం ఆగిపోయింది. నేను విరిగిన డ్రాప్డౌన్ని చూడగలిగాను మరియు ఏ పూర్వీకుడు బాధ్యత వహిస్తాడో వెంటనే కనుగొనగలిగాను. నేను DOMని ఎలా చదివానో ఆ మార్పు నిజమైన టేకావే. ఒక్క సరైన సమాధానం లేదు. నేను కోడ్బేస్లో ఏమి నియంత్రించగలను అనేదానిపై ఆధారపడింది: పూర్వీకుల చెట్టు అనూహ్యమైనప్పుడు పోర్టల్లు; ఇది శుభ్రంగా మరియు సరళంగా ఉన్నప్పుడు స్థిర స్థానం; ఏదీ నన్ను ఆపనప్పుడు మూలకాన్ని కదిలించడం; మరియు యాంకర్ పొజిషనింగ్ ఇప్పుడు,నేను ఎక్కడ చేయగలను. మీరు ఏది ఎంచుకున్నా, యాక్సెసిబిలిటీని చివరి దశగా పరిగణించవద్దు. నా అనుభవంలో, అది ఖచ్చితంగా దాటవేయబడుతుంది. ARIA సంబంధాలు, ఫోకస్ మేనేజ్మెంట్, కీబోర్డ్ ప్రవర్తన - ఇవి పోలిష్ కావు. అవి వాస్తవానికి పని చేసే వాటిలో భాగం. నా GitHub రెపోలో పూర్తి సోర్స్ కోడ్ని చూడండి. తదుపరి పఠనం దీని ద్వారా పని చేస్తున్నప్పుడు నేను తిరిగి వస్తున్న సూచనలు ఇవి:
స్టాకింగ్ సందర్భం (MDN) "CSS యాంకర్ పొజిషనింగ్ గైడ్", జువాన్ డియెగో రోడ్రిగ్జ్ "పాపోవర్ APIతో ప్రారంభించడం", గాడ్స్టైమ్ అబురు ఫ్లోటింగ్ UI (floating-ui.com) CSS ఓవర్ఫ్లో (MDN)
