Ɛkame ayɛ sɛ bere nyinaa na tebea no yɛ pɛ, a ɛyɛ data pon a ɛwɔ ade a wotumi twetwe mu mu. Row biara wɔ adeyɛ menu, dropdown ketewa bi a ɛwɔ akwan bi, te sɛ Edit, Duplicate, ne Delete. Wosi no, ɛte sɛ nea ɛyɛ adwuma pɛpɛɛpɛ wɔ baabi a atew ne ho, na afei obi de to saa scrollable div no mu na nneɛma hwe ase. M’ahu saa bɔne yi pɛpɛɛpɛ wɔ codebases ahorow abiɛsa mu: container, stack, ne framework, ne nyinaa yɛ soronko. Nanso, mmoawa no yɛ pɛ koraa. Dropdown no nya clipped wɔ container’s ano. Anaasɛ ɛda adi wɔ nsɛm a ɛsɛ sɛ ntease wom sɛ ɛwɔ n’ase akyi. Anaasɛ ɛyɛ adwuma yiye kosi sɛ nea ɔde di dwuma no bɛtwetwe, na afei akɔ akyirikyiri. Wo nsa ka z-index: 9999. Ɛtɔ da bi a ɛboa, nanso mmere foforo nso ɛnyɛ hwee koraa. Saa abirabɔ no ne ade a edi kan a ɛkyerɛ sɛ biribi a emu dɔ rekɔ so. Nea enti a ɛkɔ so san ba ne sɛ browser nhyehyɛe abiɛsa a ɛsono emu biara na ɛka ho, na developers dodow no ara te emu biara ase wɔ n’ankasa mu nanso wonsusuw nea ɛba bere a abiɛsa no nyinaa bɔ ho da: overflow, stacking contexts, ne containing blocks.
Sɛ wote sɛnea abiɛsa no nyinaa di nkitaho ase wie a, huammɔdi akwan no gyae te nka sɛ ɛyɛ random. Nokwarem no, wɔbɛyɛ nea wotumi hyɛ ho nkɔm. Nneɛma Abiɛsa a Ɛde Eyi Ba Ankasa Momma yɛnhwɛ saa nneɛma no mu biara nkɔ akyiri. Ɔhaw a Ɛfa Overflow Ho no Sɛ wode overflow: hidden, overflow: scroll, anaa overflow: auto si element bi so a, browser no bɛtwitwa biribiara a ɛtrɛw kɔ akyiri sen n’ahye, a asefo a wɔwɔ gyinabea koraa ka ho. .scroll-akorae { . nsuo a ɛboro so: auto; ne sorokɔ: 300px; /* Wei bɛtwitwa dropdown no, full stop */ . } .
.dropdown { . gyinabea: nea edi mũ; /* Ɛnfa ho -- ɛda so ara atwitwa denam .scroll-container so */ } .
Ɛno maa me ho dwiriw me bere a edi kan a mituu mmirika kɔɔ mu no. I’d assumed position: absolute bɛma element bi aguan afi container’s clipping mu. Ɛnyɛ saa. Wɔ nneyɛe mu no, ɛno kyerɛ sɛ menu a ɛwɔ gyinabea koraa no betumi atwa denam nana biara a ɔwɔ overflow value a ɛnyɛ nea wotumi hu so, sɛ mpo saa nana no nyɛ menu’s containing block a. Clipping ne positioning yɛ nhyehyɛe ahorow a ɛsono emu biara. Ɛba kɛkɛ sɛ wɔbɔ wɔn ho wɔn ho wɔ akwan horow so a ɛte sɛ nea wɔanhyɛ da koraa kosi sɛ wobɛte abien no nyinaa ase.
React nhwɛsoɔ a wɔde createPortal di dwuma ni:
fa { createPortal } fi 'react-dom' mu; import { useState, fa di dwumaEffect, fa di dwumaRef } fi 'yɛ ade';
adwuma Dropdown ({ anchorRef, isOpen, mmofra }) { const [gyinabea, setPosition] = useState ({ soro: 0, benkum: 0 });
fa Nsunsuanso di dwuma (() => { . sɛ (yɛOpen && anchorRef.mprempren) { . const rect = anchorRef.mprempren.gyeBoundingAdetɔfoRect (); setGyinabea ({ soro: rect.ase + mfɛnsere.scrollY, . benkum: rect.benkum + mfɛnsere.scrollX, . }); } . }, [ɛyɛOpen, anchorRef]);
sɛ (!isOpen) san de null ba;
san kɔ createPortal( ) so.
Na, nokwarem no, yɛrentumi mmu yɛn ani ngu akwan a wɔfa so kɔ hɔ no so. Ɛsɛ sɛ nneɛma a wɔasiesie a epue wɔ nsɛm so no da so ara yɛ nea wotumi de keyboard di dwuma. Sɛ focus order no ntumi nkɔ fixed dropdown no mu fi awosu mu a, ɛho behia sɛ wode code di dwuma. Ɛfata nso sɛ wobɛhwɛ sɛ ɛntra nkitahodi nneɛma afoforo so a ɔkwan biara nni hɔ a wobɛfa so apow. Saa baako no ka wo wɔ keyboard sɔhwɛ mu. CSS Anchor Positioning: Baabi a Misusuw sɛ Eyi Rekɔ CSS Anchor Positioning yɛ akwankyerɛ a m’ani gye ho kɛse mprempren. Na minnim sɛnea spec no dodow no ara yɛ nea wotumi de di dwuma ankasa bere a midii kan hwɛɛ no no. Ɛma wopae mu ka abusuabɔ a ɛda dropdown ne ne trigger ntam tẽẽ wɔ CSS mu, na browser no di coordinates no ho dwuma. .trigger { . anchor-din: --me-ahyɛnsodeɛ; } .
.dropdown-menu { . gyinabea: nea edi mũ; gyinabea-anchor: --me-ahyɛnsode; soro: anchor(ase); benkum: anchor(benkum); gyinabea-bɔ mmɔden-fallbacks: flip-block, flip-inline; } .
Position-try-fallbacks agyapade no ne nea ɛma eyi fata sɛ wɔde di dwuma wɔ nsaano akontaabu so. Browser no sɔ mmeae foforo hwɛ ansa na wagyae, enti dropdown bi a ɛwɔ viewport no ase no dannan kɔ soro ankasa sen sɛ ɛbɛtwa. Browser mmoa yɛ den wɔ Chromium-based browsers mu na ɛrenya nkɔso wɔ Safari mu. Firefox hia polyfill. @oddbird/css-anchor-positioning package no kata core spec no so. I’ve hit layout edge cases with it that required fallbacks a na menhwɛ kwan, enti fa no sɛ nkɔsoɔ a ɛkɔ so anaa fa fa aJavaScript fallback ma Firefox. Ne tiaatwa mu no, ɛhyɛ bɔ nanso ɛnyɛ amansan nyinaa de besi nnɛ. Sɔ hwɛ wɔ wo browser ahorow a wode w’ani asi so no mu. Na sɛnea ɛfa accessibility ho no, sɛ wobɛpae mu aka abusuabɔ a ɛda aniwa so wɔ CSS mu a, ɛnkyerɛ accessibility dua no hwee. aria-controls, aria-expanded, aria-haspopup — saa fã no da so ara wɔ wo so. Ɛtɔ da bi a, Fix no Yɛ Moving The Element Kɛkɛ Ansa na mɛduru portal bi so anaasɛ mɛyɛ coordinate akontabuo no, berɛ biara medi kan bisa asɛm baako: So ɛhia ankasa sɛ saa dropdown yi tena scroll container no mu? Sɛ ɛnte saa a, sɛ wode markup no kɔ wrapper a ɛkorɔn so a, eyi ɔhaw no fi hɔ koraa, a JavaScript nni hɔ na coordinate akontaabu biara nni hɔ. Ɛnyɛ bere nyinaa na eyi betumi aba. Sɛ wɔde button ne dropdown no ahyɛ ade koro no ara mu a, sɛ wode biako kɔ baabi foforo a ɔfoforo nka ho a, ɛkyerɛ sɛ wobɛsan asusuw API no nyinaa ho. Nanso sɛ wotumi yɛ a, biribiara nni hɔ a wobɛsiesie. Ɔhaw no nni hɔ kɛkɛ. Nea Nnɛyi CSS Da so ara Ntumi Nsiesie CSS akɔ akyirikyiri wɔ ha, nanso mmeae bi da so ara wɔ hɔ a ɛma w’abam bu. Gyinabea no: fixed ne transform nsɛm da so ara wɔ hɔ. Ɛyɛ spec no mu ahyɛ da, a ɛkyerɛ sɛ CSS adwumayɛ biara nni hɔ. Sɛ wode animation nhomakorabea a ɛkyekyere wo nhyehyɛe no wɔ element a wɔasakra mu redi dwuma a, woasan akɔ baabi a wuhia portals anaa anchor positioning. CSS Anchor Positioning yɛ bɔhyɛ, nanso ɛyɛ foforo. Sɛnea yɛadi kan aka no, Firefox da so ara hia polyfill wɔ bere a merekyerɛw eyi no. I’ve hit layout edge cases ne no a ɛhwehwɛ fallbacks a na menhwɛ kwan. Sɛ wo hia suban a ɛkɔ so daa wɔ browser nyinaa mu nnɛ a, woda so ara rekɔ JavaScript so ama afã horow a ɛyɛ anifere no. Adeɛ a wɔde aka ho a masesa m’adwumayɛ kwan ankasa ne HTML Popover API, a seesei ɛwɔ nnɛyi browser nyinaa mu. Elements a popover attribute no kyerɛ wɔ browser’s top layer no mu, wɔ biribiara so, a JavaScript gyinabea biara ho nhia.
Escape handling, dismiss-on-click-outside, ne solid accessibility semantics ba kwa ma nneɛma te sɛ tooltips, disclosure widgets, ne overlays a ɛnyɛ den. Ɛyɛ adwinnade a edi kan a medu ho mprempren. Ɛno akyi no, ɛnsiesie positioning. Ɛsiesie layering. Woda so ara hia anchor positioning anaa JavaScript na ama popover bi ahyia ne trigger. Popover API no di layering no ho dwuma. Anchor positioning na ɛdi placement no ho dwuma. Sɛ wɔde di dwuma bom a, wɔka nea kan no na wo nsa bɛka ama nhomakorabea bi ayɛ no mu dodow no ara. Gyinaesi Akwankyerɛ a Ɛfa Wo Tebea Ho Bere a mafa eyinom nyinaa mu wɔ ɔkwan a ɛyɛ den so akyi no, sɛnea misusuw nea wɔpaw no ho ankasa mprempren ni.
Fa portal di dwuma.I’d use this bere a trigger no te deep wɔ nested scroll containers mu. Mede saa nhwɛsoɔ yi dii dwuma maa table action menus na mede bɔɔ mu ne focus sanba ne accessibility checks. Ɛyɛ ɔkwan a wotumi de ho to so sen biara, nanso budget bere ma wiring a ɛboro so no. Fa fixed positioning di dwuma.Eyi yɛ ma bere a wowɔ vanilla JavaScript anaasɛ framework a emu yɛ hare mu na ebetumi ahwɛ sɛ nana biara nni hɔ a ɔde transforms anaa filters di dwuma. Ɛyɛ mmerɛw sɛ wobɛhyehyɛ na ɛnyɛ den sɛ wobɛsiesie, bere tenten a saa anohyeto biako no kura. Fa CSS Anchor Positioning di dwuma.Reach ma eyi bere a wo browser mmoa ma ho kwan. Sɛ Firefox mmoa ho hia a, fa no ne @oddbird polyfill no bom. Eyi ne baabi a awiei koraa no asɛnka agua no rekɔ na awiei koraa no ɛbɛyɛ wo kwan a wobɛfa so akɔ. San hyehyɛ DOM.Fa eyi di dwuma bere a architecture no ma ho kwan, na wopɛ sɛ zero runtime complexity. Migye di sɛ ɛbɛyɛ sɛ ɛyɛ ɔkwan a wɔmfa nyɛ hwee sen biara. Combine patterns.Yɛ eyi bere a wopɛ sɛ anchor positioning yɛ wo kwan titiriw, a wɔde JavaScript fallback abɔ mu ama browser ahorow a wɔmmoa. Anaasɛ portal ma DOM placement a wɔde getBoundingClientRect() abɔ mu ama coordinate pɛpɛɛpɛ.
Awiei Na metaa di saa mmoawa yi ho dwuma sɛ asɛm a ɛba pɛnkoro — biribi a ɛsɛ sɛ mesiesie na mekɔ so fi mu. Nanso bere a me ne no traa ase kyɛe sɛnea ɛbɛyɛ a mɛte nhyehyɛe abiɛsa a ɛka ho no nyinaa ase — overflow clipping, stacking contexts, ne containing blocks — egyaee te nka sɛ random. Na metumi ahwɛ dropdown bi a abubu na ntɛm ara na mahu nana bɛn na ɔde asodi no bae. Saa nsakrae a ɛbaa sɛnea mekenkanee DOM no mu no ne ade a wɔde kɔe ankasa. Mmuae biako biara nni hɔ a ɛteɛ. Nea me nsa kaa no gyina nea metumi adi so wɔ codebase no mu so: portals bere a na nana dua no yɛ nea wontumi nhu; gyinabea a wɔahyɛ da ayɛ bere a na ɛho tew na ɛnyɛ den no; element no a mɛtu bere a na biribiara nsiw me kwan; ne ankora a wɔde si hɔ mprempren, .baabi a metumi. Biribiara a wubewie a wobɛpaw no, mmu accessibility sɛ anammɔn a etwa to. Wɔ me suahu mu no, ɛno ara ne bere a wɔde skipped. ARIA abusuabɔ, focus management, keyboard suban — ɛnonom nyɛ polish. Wɔyɛ nea ɛma ade no yɛ adwuma ankasa no fã. Hwɛ source code no nyinaa wɔ me GitHub repo no mu. Akenkan a Ɛkɔ Akyiri Eyinom ne nsɛm a mekɔɔ so san baa so bere a na mereyɛ eyi ho adwuma no:
Nsɛm a Ɛfa Stacking (MDN) no . “CSS Anchor Positioning Akwankyerɛ”, Juan Diego Rodriguez “Ade Popover API no Mfiase”, Godstime Aburu UI a ɛsensɛn nsu so (floating-ui.com) . CSS a Ɛboro So (MDN) .
