Skenario meh padha, yaiku tabel data ing wadhah sing bisa digulung. Saben baris duwe menu tumindak, dropdown cilik karo sawetara opsi, kayata Sunting, Duplikat, lan Busak. Sampeyan mbangun iku, misale jek bisa sampurna ing isolasi, lan banjur wong sijine iku nang sing div scrollable lan iku tiba loro. Aku wis ndeleng bug sing tepat iki ing telung basis kode sing beda: wadhah, tumpukan, lan kerangka, kabeh beda. Bug, sanadyan, iku babar blas identik. Gulung mudhun bakal dipotong ing pinggir wadhah. Utawa katon ing mburi konten sing kudu logis ana ing ngisor iki. Utawa kerjane apik nganti pangguna nggulung, banjur mabur. Sampeyan tekan z-indeks: 9999. Kadhangkala mbantu, nanging ing wektu liyane pancen ora ana apa-apa. Inkonsistensi kasebut minangka pitunjuk pisanan yen kedadeyan sing luwih jero. Alesane terus bali yaiku telung sistem browser sing kapisah melu, lan umume pangembang ngerti saben siji dhewe nanging ora tau mikir apa sing kedadeyan nalika telu tabrakan: kebanjiran, tumpukan konteks, lan ngemot blok.
Sawise sampeyan ngerti carane kabeh telung sesambungan, mode Gagal mandheg kroso acak. Nyatane, dheweke dadi bisa ditebak. Telung Perkara Sing Nyebabake Iki Ayo ndeleng saben item kasebut kanthi rinci. Masalah Overflow Nalika sampeyan ngeset overflow: didhelikake, overflow: gulung, utawa overflow: otomatis ing unsur, browser bakal clip apa wae sing ngluwihi wates sawijining, kalebu turunan pancen dipanggonke. .gulung-wadhah { kebanjiran: otomatis; dhuwur: 300px; /* Iki bakal ngethok gulung mudhun, titik */ }
.mudhun { posisi: mutlak; /* Ora masalah -- isih dipotong dening .scroll-container */ }
Sing kaget aku pisanan aku mlayu menyang iku. Aku nganggep posisi: absolut bakal ngidini unsur uwal saka clipping wadhah. Iku ora. Ing laku, iku tegese menu pancen dipanggonke bisa Cut mati dening sembarang leluhur sing duwe nilai kebanjiran non-katon, sanajan leluhur sing dudu blok ngemot menu. Kliping lan posisi minangka sistem sing kapisah. Padha mung kelakon tabrakan ing cara sing katon rampung acak nganti sampeyan ngerti loro.
Iki conto React nggunakake createPortal:
ngimpor {createPortal} saka 'react-dom'; ngimpor {useState, useEffect, useRef} saka 'reaksi';
fungsi Dropdown({ anchorRef, isOpen, children }) { const [posisi, setPosition] = useState ({ndhuwur: 0, kiwa: 0});
useEffect(() => { yen (isOpen && anchorRef.current) { const rect = anchorRef.current.getBoundingClientRect(); SetPosition({ ndhuwur: rect.bottom + window.scrollY, kiwa: rect.left + window.scrollX, }); } }, [isOpen, anchorRef]);
yen (!isOpen) bali null;
bali nggawePortal (
Lan, mesthi, kita ora bisa nglirwakake aksesibilitas. Unsur tetep sing katon ing isi kudu tetep bisa diakses keyboard. Yen urutan fokus ora pindhah menyang dropdown tetep, sampeyan kudu ngatur nggunakake kode. Iku uga worth mriksa sing ora njagong liwat konten interaktif liyane tanpa cara kanggo ngilangi. Sing siji cokotan sampeyan ing testing keyboard. CSS Anchor Positioning: Where I Think This Is Heading CSS Anchor Positioning minangka arah sing paling aku minati saiki. Aku ora yakin manawa spek kasebut bisa digunakake nalika pisanan ndeleng. Ngidini sampeyan ngumumake hubungan antarane dropdown lan pemicu langsung ing CSS, lan browser nangani koordinat. .pemicu { anchor-name: --my-trigger; }
.menu gulung mudhun { posisi: mutlak; posisi-jangkar: --my-trigger; ndhuwur: jangkar (ngisor); kiwa: jangkar(kiwa); posisi-nyoba-fallbacks: flip-block, flip-inline; }
Properti position-try-fallbacks sing ndadekake iki worth nggunakake liwat pitungan manual. Browser nyoba panggonan alternatif sadurunge nyerah, supaya dropdown ing sisih ngisor viewport kanthi otomatis malik munggah tinimbang dipotong. Dhukungan browser kuat ing browser adhedhasar Chromium lan tuwuh ing Safari. Firefox butuh polyfill. Paket @oddbird/css-anchor-positioning nyakup spek inti. Aku wis kenek kasus pinggiran tata letak karo sing mbutuhake fallbacks aku ora antisipasi, supaya dianggep minangka dandan progresif utawa masangake karofallback JavaScript kanggo Firefox. Ing cendhak, janji nanging durung universal. Tes ing browser target. Lan babagan aksesibilitas, nyatakake hubungan visual ing CSS ora ngandhani wit aksesibilitas apa wae. aria-controls, aria-expanded, aria-haspopup - bagean kasebut isih ana ing sampeyan. Kadhangkala Fix Mung Obah Unsur Sadurunge tekan portal utawa nggawe petungan koordinat, aku mesthi takon dhisik: Apa dropdown iki kudu manggon ing wadhah gulung? Yen ora, mindhah markup menyang pambungkus tingkat sing luwih dhuwur ngilangi masalah kabeh, tanpa JavaScript lan ora ana petungan koordinat. Iki ora mesthi bisa. Yen tombol lan molor sing encapsulated ing komponèn padha, obah siji tanpa liya rethinking kabeh API. Nanging nalika sampeyan bisa nindakake, ora ana sing kudu didebug. Masalah mung ora ana. Apa CSS Modern Isih Ora Ngatasi CSS wis adoh banget ing kene, nanging isih ana panggonan sing bisa sampeyan mudhun. Posisi: masalah tetep lan ndandani isih ana. Ana ing spek kanthi sengaja, tegese ora ana solusi CSS. Yen sampeyan nggunakake perpustakaan animasi sing mbungkus tata letak ing unsur sing diowahi, sampeyan kudu bali menyang portal utawa posisi jangkar. CSS Anchor Positioning janjeni, nanging anyar. Kaya sing wis kasebut sadurunge, Firefox isih butuh polyfill nalika aku nulis iki. Aku wis mencet kasus pinggiran tata letak karo sing dibutuhake fallbacks aku ora antisipasi. Yen sampeyan butuh prilaku sing konsisten ing kabeh browser saiki, sampeyan isih entuk JavaScript kanggo bagean sing angel. Kajaba iku, aku wis ngganti alur kerjaku yaiku HTML Popover API, saiki kasedhiya ing kabeh browser modern. Elemen karo atribut popover render ing lapisan ndhuwur browser, ndhuwur kabeh, tanpa posisi JavaScript dibutuhake.
Penanganan uwal, ngilangi-on-klik-njaba, lan semantik aksesibilitas sing padhet gratis kanggo bab-bab kaya tooltip, widget pambocoran, lan overlay sing prasaja. Iku alat pisanan aku tekan saiki. Sing jarene, ora ngatasi posisi. Iku solves layering. Sampeyan isih butuh posisi jangkar utawa JavaScript kanggo nyelarasake popover menyang pemicu. Popover API nangani layering. Posisi jangkar nangani penempatan. Digunakake bebarengan, padha nutupi umume apa sing sadurunge sampeyan tekan kanggo perpustakaan. Pandhuan Keputusan Kanggo Kahanan Sampeyan Sawise ngliwati kabeh iki kanthi cara sing angel, iki kepiye carane aku mikir babagan pilihan saiki.
Gunakake portal. Aku bakal nggunakake iki nalika pemicu urip jero ing wadhah gulung nested. Aku nggunakake pola iki kanggo menu tumindak meja lan dipasangake karo pemugaran fokus lan mriksa aksesibilitas. Iku pilihan sing paling dipercaya, nanging wektu budget kanggo kabel ekstra. Gunakake posisi tetep. Iki kanggo nalika sampeyan lagi ing vanilla JavaScript utawa framework entheng lan bisa verifikasi ora leluhur ditrapake ubah utawa saringan. Iku prasaja kanggo nyiyapake lan prasaja kanggo debug, anggere siji alangan terus. Gunakake CSS Anchor Positioning. Tekan iki nalika dhukungan browser sampeyan ngidini. Yen dhukungan Firefox dibutuhake, pasangake karo @oddbird polyfill. Iki minangka platform pungkasane lan bakal dadi pendekatan sampeyan. Ngatur maneh DOM. Gunakake iki nalika arsitektur ngidini, lan sampeyan pengin nul runtime kerumitan. Aku pracaya iku kamungkinan pilihan sing paling diremehake. Gabungke pola. Lakukan iki yen sampeyan pengin posisi jangkar minangka pendekatan utama, dipasangake karo mundur JavaScript kanggo browser sing ora didhukung. Utawa portal kanggo panggonan DOM dipasangake karo getBoundingClientRect () kanggo akurasi koordinat.
Kesimpulan Aku digunakake kanggo nambani bug iki minangka masalah siji-mati - soko kanggo patch lan pindhah saka. Nanging yen aku lungguh kanthi cukup suwe kanggo ngerti kabeh telung sistem sing melu - clipping kebanjiran, tumpukan konteks, lan ngemot blok - mandheg kanthi acak. Aku bisa ndeleng dropdown sing rusak lan langsung nglacak leluhur sing tanggung jawab. Sing owah-owahan ing carane aku maca DOM minangka takeaway nyata. Ora ana jawaban sing bener. Apa sing dakkarepake gumantung marang apa sing bisa dikontrol ing basis kode: portal nalika wit leluhur ora bisa ditebak; posisi tetep nalika resik lan prasaja; obah unsur nalika ora ana sing mandheg; lan posisi jangkar saiki,ngendi aku bisa. Apa wae sing sampeyan pilih, aja nganggep aksesibilitas minangka langkah pungkasan. Ing pengalamanku, iku persis nalika dilewati. Hubungan ARIA, manajemen fokus, prilaku keyboard - iku ora polesan. Dheweke dadi bagean saka apa sing nggawe barang kasebut bisa ditindakake. Priksa kode sumber lengkap ing repo GitHub. Wacan Salajengipun Iki minangka referensi sing aku terus bali nalika nggarap iki:
Konteks Tumpukan (MDN) "Pandhuan Posisi Jangkar CSS", Juan Diego Rodriguez "Miwiti Kanthi Popover API", Godstime Aburu UI ngambang (floating-ui.com) CSS Overflow (MDN)
