Ny scenario dia saika mitovy foana, izany hoe latabatra angona ao anaty fitoeran-javatra azo scrolling. Ny andalana tsirairay dia manana menio hetsika, fidina kely misy safidy sasany, toy ny Edit, Duplicate, ary Delete. Manangana azy ianao, toa miasa tsara mitokana izy io, ary avy eo misy olona mametraka azy ao anatin'ilay div azo soratana ary rava ny zavatra. Hitako tamin'ny codebases telo samy hafa ity bug ity: ny container, ny stack, ary ny framework, samy hafa avokoa. Ny bug anefa dia mitovy tanteraka. Apetaho eo amin'ny sisin'ny kaontenera ny fanalana. Na miseho ao ambadiky ny votoaty izay tokony ho eo ambanin'ny lojika. Na mandeha tsara izy io mandra-pahatongan'ny mpampiasa horonan-taratasy, ary avy eo dia mihodina. Tonga amin'ny z-index ianao: 9999. Indraindray dia manampy izany, fa indraindray dia tsy manao na inona na inona. Io tsy fitovian-kevitra io no famantarana voalohany fa misy zavatra lalina kokoa mitranga. Ny antony hiverenany hatrany dia ny fisian'ny rafitra navigateur telo misaraka, ary ny ankamaroan'ny mpamorona dia mahatakatra ny tsirairay amin'izy ireo fa tsy mieritreritra ny zava-mitranga rehefa mifandona izy telo ireo: ny fihoaram-pefy, ny fitambaran'ny contexte, ary misy sakana.
Rehefa azonao ny fomba ifandraisan'izy telo ireo dia mijanona ho kisendrasendra ny fomba tsy fahombiazana. Raha ny marina dia lasa azo vinaniana izy ireo. Ireo zavatra telo tena mahatonga izany Andeha hojerentsika amin'ny antsipiriany ny tsirairay amin'ireo zavatra ireo. Ny Olana Mihoatra Rehefa mametraka overflow: miafina, overflow: horonana, na overflow: mandeha ho azy amin'ny singa iray, ny navigateur dia hanaisotra izay rehetra mihoatra ny fetrany, ao anatin'izany ny taranaka tena mipetraka. .scroll-container { tondraka: fiara; haavony: 300px; /* Ity dia hanapaka ny fidina, fijanonana feno */ }
.midina { toerana: tanteraka; /* Tsy maninona -- mbola notapahin'ny .scroll-container */ }
Nahagaga ahy izany tamin'ny fotoana voalohany niharan'izany. Nihevitra ny toerana aho: ny absolute dia mamela singa iray handositra ny fitepon'ny container. Tsy izany. Amin'ny fampiharana, midika izany fa ny sakafo voapetraka tanteraka dia mety hotapahina amin'ny razambe rehetra izay manana sanda mihoa-pampana tsy hita maso, na dia tsy bloc misy ao amin'ny sakafo aza io razambe io. Ny clipping sy positioning dia rafitra misaraka. Mifandona fotsiny izy ireo amin'ny fomba izay toa kisendrasendra tanteraka mandra-pahazoanao azy roa.
Ity misy ohatra React mampiasa createPortal:
manafatra { createPortal } avy amin'ny 'react-dom'; import {useState, useEffect, useRef} avy amin'ny 'react';
function Dropdown({ anchorRef, isOpen, ankizy }) { const [toerana, setPosition] = useState({top: 0, ankavia: 0});
useEffect(() => { raha (isOpen && anchorRef.current) { const rect = anchorRef.current.getBoundingClientRect(); setPosition({ ambony: rect.bottom + window.scrollY, ankavia: rect.left + window.scrollX, }); } }, [isOpen, anchorRef]);
raha (!isOpen) miverina null;
mamerina mamoronaPortal(
Ary, mazava ho azy, tsy azontsika odian-tsy hita ny fidirana. Ny singa raikitra izay miseho eo ambonin'ny atiny dia tsy maintsy mbola azo tratrarina amin'ny fitendry. Raha toa ka tsy mandeha ho azy ny filaharana fifantohana dia mila mitantana azy amin'ny fampiasana kaody ianao. Tsara ihany koa ny manamarina fa tsy mipetraka amin'ny votoaty mifampiresaka hafa tsy misy fomba hanilihana azy. Izy io dia manaikitra anao amin'ny fitsapana klavier. CSS Vatofantsika Positioning: Aiza no Heveriko ho Lohahevitra Ity CSS Anchor Positioning no lalana tena mahaliana ahy amin'izao fotoana izao. Tsy azoko antoka hoe firy amin'ny spec no tena azo ampiasaina raha vao nijery azy aho. Mamela anao hanambara ny fifandraisana misy eo amin'ny fidina sy ny trigger mivantana ao amin'ny CSS, ary ny navigateur no mitantana ny koordinate. .trigger { anarana vatofantsika: --my-trigger; }
.dropdown-menu { toerana: tanteraka; vatofantsika toerana: --my-trigger; ambony: vatofantsika (ambany); ankavia: vatofantsika (ankavia); toerana-andrana-fallbacks: flip-block, flip-inline; }
Ny fananana position-try-fallbacks no mahatonga an'izany hampiasaina amin'ny kajy manual. Ny navigateur dia manandrana toerana hafa alohan'ny hialana, ka ny fidinana eo amin'ny farany ambany amin'ny seranan-tsambo dia mivadika ho ambony fa tsy tapaka. Ny fanohanan'ny navigateur dia mafy orina amin'ny navigateur mifototra amin'ny Chromium ary mitombo ao amin'ny Safari. Mila polyfill ny Firefox. Ny fonosana @oddbird/css-anchor-positioning dia mandrakotra ny fototra fototra. Nahita tranga sisin-dàlana aho tamin'izany izay nitaky famerenam-bola tsy noheveriko, koa raiso ho toy ny fanatsarana miandalana izany na ampifandraiso amin'nyJavaScript fallback ho an'ny Firefox. Raha fintinina, mampanantena fa tsy mbola manerana izao rehetra izao. Andramo amin'ny navigateur kendrenao. Ary raha ny momba ny fidirana, ny fanambarana fifandraisana hita maso amin'ny CSS dia tsy milaza na inona na inona amin'ny hazo fidirana. aria-controls, aria-expanded, aria-haspopup — mbola eo aminao io ampahany io. Indraindray ny Fix dia mamindra ny singa fotsiny Alohan'ny hahatongavana any amin'ny vavahadin-tserasera na fanaovana kajikajy mandrindra dia mametraka fanontaniana iray foana aloha aho: Tena mila mipetraka ao anatin'ny fitoeran'ny horonam-boky ve ity dropdown ity? Raha tsy izany, ny famindrana ny marika mankany amin'ny fonosana avo lenta dia manafoana tanteraka ny olana, tsy misy JavaScript ary tsy misy kajy mandrindra. Tsy azo atao foana izany. Raha toa ka tafiditra ao anatin'ny singa iray ihany ny bokotra sy ny fidinana, dia midika izany fa mamindra ny iray tsy misy ny iray hafa dia midika fa mamerina ny API iray manontolo. Saingy rehefa afaka manao izany ianao, dia tsy misy na inona na inona azo amboarina. Tsy misy fotsiny ny olana. Inona no mbola tsy voavaha ny CSS maoderina Lasa lavitra ny CSS teto, saingy mbola misy toerana mampahory anao. Ny toerana: mbola misy ny olana raikitra sy fanovana. Ao amin'ny spec izy io, izay midika fa tsy misy ny CSS workaround. Raha mampiasa trano famakiam-bokin'ny animation ianao izay mameno ny drafitrao amin'ny singa voaova, dia miverina mila vavahady na fametrahana vatofantsika ianao. CSS Anchor Positioning dia mampanantena, fa vaovao. Araka ny voalaza teo aloha dia mbola mila polyfill i Firefox amin'ny fotoana anoratako an'ity. Nahita trangan'ny sisin'ny layout aho izay nitaky famerenam-bola tsy noheveriko. Raha mila fitondran-tena tsy tapaka amin'ny navigateur rehetra ianao amin'izao fotoana izao, dia mbola mikaroka JavaScript ho an'ny ampahany sarotra ianao. Ny fanampim-panazavana izay tena nanova ny fomba fiasako dia ny HTML Popover API, azo alaina amin'ny navigateur maoderina rehetra. Ny singa misy ny toetra popover dia adika ao amin'ny sosona ambony indrindra amin'ny navigateur, ambonin'ny zava-drehetra, tsy mila toerana JavaScript.
Ny fikarakarana fandosirana, ny fandroahana-amin'ny-tsindry-ivelany, ary ny semantika azo idirana dia tonga maimaim-poana amin'ny zavatra toy ny toro-hevitra, widgets fampahafantarana, ary overlay tsotra. Io no fitaovana voalohany tratrako amin'izao fotoana izao. Izany hoe, tsy mamaha ny toerana. Mamaha ny layering izany. Mbola mila fametrahana vatofantsika na JavaScript ianao mba hampifanaraka ny popover amin'ny trigger. Ny Popover API no mitantana ny layering. Ny fametrahana ny vatofantsika dia mitantana ny fametrahana. Ampiasaina miaraka, izy ireo dia mirakitra ny ankamaroan'ny zavatra azonao teo aloha ho an'ny tranomboky hatao. Torolàlana momba ny fanapahan-kevitra ho an'ny toe-javatra misy anao Taorian'ny nandalovako izany rehetra izany tamin'ny fomba sarotra, dia izao no tena hevitro momba ny safidy ankehitriny.
Mampiasà vavahadin-tserasera. Ampiasaiko ity rehefa mipetraka lalina ao anaty fitoeran-horonana misy akany ny trigger. Nampiasa ity lamina ity ho an'ny menus hetsika an-databatra aho ary nampifandraisiko tamin'ny famerenana amin'ny laoniny ny fifantohana sy ny fisavana fahafahana miditra. Io no safidy azo itokisana indrindra, fa ny teti-bola ho an'ny tariby fanampiny. Mampiasà toerana raikitra. Natao izany rehefa ao amin'ny JavaScript vanila ianao na rafitra maivana ary afaka manamarina fa tsy misy razana mampihatra fanovana na sivana. Tsotra ny amboarina ary mora ny debug, raha mbola misy ny faneriterena iray. Mampiasà CSS Anchor Positioning. Mankanesa amin'izany rehefa mamela azy ny fanohanan'ny navigateur. Raha ilaina ny fanohanan'ny Firefox dia ampifandraiso amin'ny @oddbird polyfill. Eto no hizotra amin'ny farany ny sehatra ary ho lasa fomba fanaonao amin'ny farany. Avereno amboarina ny DOM. Ampiasao ity rehefa avelan'ny maritrano izany, ary mila fahasarotana aotra amin'ny fotoana fandehanana ianao. Mino aho fa io no safidy ambany indrindra. Ampifandraiso ny lamina. Ataovy izany raha tianao ny fametrahana vatofantsika ho fomba voalohany ataonao, ampiarahina amin'ny fisintahana JavaScript ho an'ny navigateur tsy tohanana. Na vavahadin'ny fametrahana DOM miaraka amin'ny getBoundingClientRect() ho an'ny fandrindrana marina.
Fehiny Noraisiko ho toy ny olana tokana ihany ity bibikely ity - zavatra tokony hamboarina sy hifindra. Saingy rehefa niara-nipetraka elaela aho mba hahatakarana ireo rafitra telo tafiditra — fikosoham-bary mihoa-pampana, fametahana contexte ary misy sakana — dia nijanona tsy nahatsiaro ho kisendrasendra izany. Afaka nijery ny dropdown tapaka aho ary nanamarina avy hatrany hoe iza no tompon'andraikitra. Io fiovana teo amin'ny famakiako ny DOM io no tena nalaina. Tsy misy valiny marina tokana. Ny zavatra tratrako dia miankina amin'ny zavatra azoko fehezina ao amin'ny codebase: vavahadin-tserasera rehefa tsy azo vinavinaina ny hazo razana; toerana raikitra rehefa madio sy tsotra; mamindra ny singa rehefa tsy nisy nanakana ahy; ary toeran'ny vatofantsika izao,izay azoko. Na inona na inona safidinao, aza raisina ho toy ny dingana farany ny fidirana. Raha ny zavatra niainako, dia izany indrindra no fotoana voadingana. Ny fifandraisan'ny ARIA, ny fitantanana fifantohana, ny fitondran-tena amin'ny fitendry - ireo dia tsy poloney. Izy ireo dia anisan'ny mahatonga ny zavatra tena miasa. Jereo ny kaody loharano feno ao amin'ny repo GitHub. Famakiana fanampiny Ireto ny references niverimberiko foana rehefa niasa tamin'ity:
The Stacking Context (MDN) "Torolalana momba ny toerana misy ny CSS", Juan Diego Rodriguez "Manomboka amin'ny Popover API", Godstime Aburu Floating UI (floating-ui.com) Mihoatra ny CSS (MDN)
