Skenariona ampir sami, nyaéta tabel data dina wadah anu tiasa digulung. Unggal baris gaduh ménu aksi, turunan leutik sareng sababaraha pilihan, sapertos Édit, Duplikat, sareng Hapus. Anjeun ngawangun éta, sigana dianggo sampurna dina isolasi, lajeng batur nempatkeun eta di jero éta div scrollable jeung hal ragrag eta. Kuring geus katempo bug pasti ieu dina tilu codebases béda: wadahna, tumpukan, sarta kerangka, sadayana béda. Bug, sanajan, sagemblengna idéntik. Turunna dipotong di tepi wadahna. Atawa nembongkeun up balik eusi nu kedah logis jadi handap eta. Atanapi jalanna saé dugi ka pangguna ngagulung, teras ngalayang. Anjeun ngahontal keur z-indéks: 9999. Kadangkala kacida mantuan, tapi kali séjén teu nanaon. Inconsistency éta mangrupikeun petunjuk anu munggaran yén aya anu langkung jero kajantenan. Alesan anu terus-terusan datang deui nyaéta tilu sistem browser anu misah anu kalibet, sareng kalolobaan pamekar ngartos masing-masing nyalira tapi henteu kantos mikirkeun naon anu lumangsung nalika tilu tabrakan: ngabahekeun, tumpukan kontéks, sareng ngandung blok.
Sakali anjeun ngartos kumaha tilu interaksi, mode gagalna eureun ngarasa acak. Kanyataanna, aranjeunna jadi bisa diprediksi. Tilu Hal Sabenerna Nyababkeun Ieu Hayu urang nempo unggal item eta di jéntré. Masalah Lembur Lamun anjeun nyetel ngabahekeun: disumputkeun, ngabahekeun: ngagulung, atawa ngabahekeun: otomatis dina hiji unsur, browser bakal klip naon bae anu ngalegaan saluareun watesna, kaasup turunan pancen diposisikan. .gulung-wadah { ngabahekeun: otomatis; jangkungna: 300px; /* Ieu bakal klip dropdown, titik pinuh */ }
.dropdown { posisi: mutlak; /* Henteu masalah -- masih dipotong ku .scroll-container */ }
Nu kaget kuring mimitina kuring lumpat ka dinya. Abdi nganggap posisi: mutlak bakal ngantep hiji unsur kabur clipping wadahna urang. Éta henteu. Dina prakna, éta hartosna ménu anu leres-leres diposisikan tiasa dipotong ku karuhun anu ngagaduhan nilai ngabahekeun anu teu katingali, sanaos karuhun éta sanés blok anu ngandung ménu. Clipping sareng posisi mangrupikeun sistem anu misah. Éta ngan lumangsung tabrakan dina cara nu kasampak sagemblengna acak dugi ka ngartos duanana.
Ieu conto React nganggo createPortal:
impor {createPortal} tina 'réact-dom'; impor {useState, useEffect, useRef} tina 'réaksi';
fungsi Dropdown ({ anchorRef, isOpen, barudak}) { const [posisi, setPosition] = useState ({luhur: 0, kénca: 0});
useEffect(() => { lamun (isOpen && anchorRef.current) { const rect = anchorRef.current.getBoundingClientRect(); setPosition({ luhur: rect.bottom + window.scrollY, kénca: rect.left + window.scrollX, }); } }, [isOpen, anchorRef]);
lamun (! IsOpen) balik null;
mulangkeun createPortal(
Jeung, tangtosna, urang teu bisa malire diakses. Unsur tetep anu muncul dina eusi kedah tetep tiasa dicapai ku keyboard. Upami urutan fokus henteu sacara alami ngalih kana turunna tetep, anjeun kedah ngatur éta nganggo kode. Éta ogé patut dipariksa yén éta henteu linggih dina eusi interaktif anu sanés kalayan henteu aya jalan pikeun ngaleungitkeunana. Nu hiji bites anjeun dina nguji keyboard. CSS Jangkar Positioning: Dimana Jigana Ieu Pos CSS Anchor Positioning mangrupikeun arah anu paling dipikaresep ku kuring ayeuna. Kuring henteu yakin sabaraha spésifikasi anu tiasa dianggo nalika kuring mimiti ningali éta. Éta ngamungkinkeun anjeun nyatakeun hubungan antara dropdown sareng pemicu na langsung dina CSS, sareng browser ngatur koordinat. .picu { jangkar-ngaran: --my-trigger; }
.dropdown-menu { posisi: mutlak; posisi-jangkar: --abdi-pemicu; luhur: jangkar (handap); kénca: jangkar (kénca); posisi-coba-fallbacks: flip-block, flip-inline; }
Harta posisi-coba-fallbacks anu ngajadikeun ieu patut ngagunakeun leuwih hiji itungan manual. Panyungsi nyobian panempatan alternatif sateuacan nyerah, janten turunna di handapeun viewport sacara otomatis malik ka luhur tibatan dipotong. Pangrojong browser kuat dina browser basis Chromium sareng tumuwuh di Safari. Firefox peryogi polyfill. Paket @oddbird/css-anchor-positioning nyertakeun spésifikasi inti. Kuring geus pencét kasus tepi tata perenah jeung eta nu diperlukeun fallbacks kuring teu diantisipasi, jadi ngubaran eta salaku enhancement kutang atawa masangkeun eta jeung afallback JavaScript pikeun Firefox. Pondokna, ngajangjikeun tapi teu universal acan. Uji dina panyungsi target anjeun. Jeung sajauh aksésibilitas prihatin, nyatakeun hubungan visual dina CSS teu ngabejaan tangkal diakses nanaon. aria-kontrol, aria-dilegakeun, aria-haspopup - éta bagian masih dina anjeun. Kadang-kadang Fix Ngan Ngalihkeun Unsur Sateuacan ngahontal portal atanapi ngadamel itungan koordinat, kuring sok naroskeun hiji patarosan heula: Naha dropdown ieu leres-leres kedah cicing di jero wadah gulung? Upami teu kitu, mindahkeun markup ka wrapper tingkat luhur ngaleungitkeun masalah sagemblengna, tanpa JavaScript tur euweuh itungan koordinat. Ieu teu salawasna mungkin. Lamun tombol na dropdown encapsulated dina komponén sarua, mindahkeun hiji tanpa hartina retthiking sakabeh API. Tapi nalika anjeun tiasa ngalakukeun éta, teu aya anu kedah di-debug. Masalahna ngan teu aya. Naon CSS Modern Masih Teu Ngabéréskeun CSS geus datangna cara lila di dieu, tapi aya kénéh tempat eta ngidinan Anjeun handap. Posisina: masalah tetep sareng transformasi masih aya. Éta dina spésifikasi ngahaja, anu hartosna henteu aya workaround CSS. Upami anjeun nganggo perpustakaan animasi anu ngabungkus perenah anjeun dina unsur anu dirobih, anjeun deui peryogi portal atanapi posisi jangkar. CSS Jangkar Positioning ngajangjikeun, tapi anyar. Sakumaha anu disebatkeun sateuacana, Firefox masih peryogi polyfill nalika kuring nyerat ieu. Kuring geus pencét kasus ujung perenah kalawan eta anu diperlukeun fallbacks Kuring teu diantisipasi. Upami anjeun peryogi paripolah anu konsisten dina sadaya panyungsi ayeuna, anjeun masih ngahontal JavaScript pikeun bagian anu rumit. Tambahan Kuring geus sabenerna robah workflow kuring keur HTML Popover API, ayeuna sadia dina sakabéh panyungsi modéren. Unsur sareng atribut popover didamel dina lapisan luhur browser, di luhur sadayana, kalayan henteu peryogi posisi JavaScript.
Penanganan kabur, dismiss-on-click-outside, sareng semantik aksésibilitas anu solid gratis pikeun hal-hal sapertos tooltips, widget panyingkepan, sareng overlay saderhana. Ieu mangrupikeun alat anu munggaran anu kuring angkat ayeuna. Kitu cenah, teu ngajawab positioning. Ieu solves layering. Anjeun masih peryogi posisi jangkar atanapi JavaScript pikeun align popover kana pemicu na. The Popover API handles layering nu. positioning jangkar handles panempatan. Dipaké babarengan, aranjeunna nutupan sabagéan ageung naon anu anjeun kantos laksanakeun pikeun perpustakaan. Pituduh Kaputusan Pikeun Situasi Anjeun Saatos ngaliwat sadayana ieu jalan anu susah, ieu kumaha kuring leres-leres mikirkeun pilihan ayeuna.
Paké portal a. Abdi ngagunakeun ieu nalika pemicu hirup jero dina wadah gulung nested. Kuring nganggo pola ieu pikeun ménu aksi méja sareng dipasangkeun sareng restorasi fokus sareng cék aksésibilitas. Ieu mangrupikeun pilihan anu paling dipercaya, tapi waktos anggaran pikeun kabel tambahan. Anggo posisi tetep. Ieu kanggo nalika anjeun dina JavaScript vanili atanapi kerangka anu ringan sareng tiasa pariksa henteu aya karuhun anu nerapkeun transformasi atanapi saringan. Ieu basajan pikeun nyetél tur basajan pikeun debug, salami éta hiji konstrain nahan. Anggo CSS Anchor Positioning.Reach pikeun ieu nalika pangrojong browser anjeun ngamungkinkeun. Upami dukungan Firefox diperyogikeun, pasangkeun sareng @oddbird polyfill. Ieu dimana platform ieu pamustunganana nuju sareng antukna bakal janten pendekatan anjeun. Susun deui DOM.Use ieu nalika arsitéktur ngijinkeun, sareng anjeun hoyong enol runtime pajeulitna. Kuring yakin éta kamungkinan pilihan paling underrated. Ngagabungkeun patterns.Lakukeun ieu nalika anjeun hoyong jangkar positioning salaku pendekatan primér anjeun, dipasangkeun sareng fallback JavaScript pikeun browser unsupported. Atawa portal pikeun panempatan DOM dipasangkeun jeung getBoundingClientRect () pikeun akurasi koordinat.
kacindekan I dipaké pikeun ngubaran bug ieu salaku hiji-off masalah - hal pikeun patch na move on ti. Tapi sakali kuring diuk kalawan eta cukup lila ngartos sakabeh tilu sistem aub - clipping mudal, tumpukan konteks, sarta ngandung blok - eta dieureunkeun ngarasa acak. Abdi tiasa ningali dropdown rusak sareng langsung ngalacak karuhun mana anu tanggung jawab. Éta pergeseran kumaha kuring maca DOM mangrupikeun panyebaran anu nyata. Henteu aya jawaban anu leres. Naon anu kuring ngahontal gumantung kana naon anu kuring tiasa ngontrol dina codebase: portal nalika tangkal karuhun teu tiasa diprediksi; posisi dibereskeun lamun éta beresih jeung basajan; mindahkeun unsur nalika euweuh ieu stopping kuring; sareng posisi jangkar ayeuna,dimana abdi tiasa. Naon waé anu anjeun pilih, ulah nganggap aksésibilitas salaku léngkah anu terakhir. Dina pangalaman abdi, éta persis lamun eta bakal skipped. Hubungan ARIA, manajemén fokus, paripolah keyboard - éta henteu poles. Aranjeunna bagian tina naon ngajadikeun hal sabenerna jalan. Pariksa kodeu sumber lengkep dina repo GitHub kuring. Bacaan salajengna Ieu mangrupikeun rujukan anu kuring teras-terasan uih deui nalika ngerjakeun ieu:
The Stacking Context (MDN) "CSS jangkar Positioning Guide", Juan Diego Rodriguez "Ngamimitian Jeung The Popover API", Godstime Aburu UI ngambang (floating-ui.com) CSS Overflow (MDN)
