Mamiriro acho anenge agara akafanana, inova tafura yedata mukati memudziyo unotenderedzwa. Mutsara wega wega une menyu yekuita, kudonha kudiki kune dzimwe sarudzo, senge Rongedza, Duplicate, uye Delete. Iwe unoivaka, inoita seinoshanda zvakakwana iri yega, uye ipapo mumwe munhu anoiisa mukati meiyo scrollable div uye zvinhu zvinodonha. Ndakaona iyi bug chaiyo mumacodebase matatu akasiyana: mudziyo, stack, uye chimiro, zvese zvakasiyana. Iyo bug, zvakadaro, yakafanana zvachose. Kudonhedza kunodonhedzwa kumucheto kwemudziyo. Kana kuti inoratidza kuseri kwemukati izvo zvinofanirwa kunge zviri pazasi payo. Kana kuti inoshanda zvakanaka kusvika mushandisi apumburudza, yobva yadonha. Iwe unosvika kune z-index: 9999. Dzimwe nguva zvinobatsira, asi dzimwe nguva hazviiti zvachose. Kusaenderana ikoko ndiko kutanga kunoratidza kuti chimwe chinhu chakadzama chiri kuitika. Chikonzero icho chinoramba chichidzoka ndechekuti matatu akapatsanurwa mabhurawuza masisitimu anobatanidzwa, uye vazhinji vanogadzira vanonzwisisa imwe neimwe yega asi havambofungi nezvezvinoitika kana ese ari matatu adhumhana: kufashukira, kurongedza mamiriro, uye ane zvidhinha.
Paunenge uchinge wanzwisisa kuti vese vatatu vanodyidzana sei, iyo yekutadza modes inomira kunzwa zvisina tsarukano. Kutaura zvazviri, vanova vanofanotaurwa. Zvinhu Zvitatu Zviri Kukonzera Izvi Ngatitarisei pane chimwe nechimwe chezvinhu izvi zvakadzama. Dambudziko Rokufashukira Paunoseta mafashama: yakavanzwa, kufashukira: kupururudza, kana kufashukira: otomatiki pane chimwe chinhu, bhurawuza inocheka chero chinhu chinodarika miganhu yayo, kusanganisira zvizvarwa zvakamisikidzwa. .scroll-container { kufashukira: auto; kureba: 300px; /* Izvi zvichacheka kudonhedza, kumira kwakazara */ }
.kudonha { chinzvimbo: mhedziso; /* Hazvina basa -- ichiri kuchekwa ne .scroll-container */ }
Izvozvo zvakandishamisa pandakatanga kupinda mairi. Ini ndaizotora chinzvimbo: mhedziso yaizorega chinhu chichipukunyuka kuputika kwemudziyo. Hazviiti. Mukuita, izvo zvinoreva kuti menyu yakanyatsomira inogona kutemwa nechero tateguru ane isingaonekwe mafashama kukosha, kunyangwe iyo tateguru isiri iyo menyu ine block. Clipping uye positioning ndiwo akasiyana masisitimu. Zvinongoitika zvekudhumhana nenzira dzinotaridzika zvisina tsarukano kusvika wanzwisisa zvese.
Heino React muenzaniso uchishandisa createPortal:
pinza {kugadziraPortal} kubva 'react-dom'; import {useState, useEffect, useRef} kubva 'react';
basa Dropdown ({ anchorRef, isOpen, vana }) { const [nzvimbo, setPosition] = useState({pamusoro: 0, kuruboshwe: 0});
useEffect(() => { kana (isOpen && anchorRef.current) { const rect = anchorRef.current.getBoundingClientRect(); setPosition({ pamusoro: rect.bottom + window.scrollY, kuruboshwe: rect.left + window.scrollX, }); } }, [isOpen, anchorRef]);
kana (!isOpen) return null;
return createPortal(
Uye, chokwadi, isu hatigone kufuratira kuwanikwa. Zvinhu zvakagadziriswa zvinoonekwa pamusoro pezviri mukati zvinofanirwa kunge zvichiri kusvikika keyboard. Kana iyo yekutarisisa odha isinga fambe mune yakamisikidzwa kudonha, iwe unozofanirwa kuibata uchishandisa kodhi. Izvo zvakakoshawo kutarisa kuti haigare pamusoro pezvimwe zvinopindirana zvemukati pasina nzira yekuzviramba. Iyoyo inokuruma mukuyedza keyboard. CSS Anchor Positioning: Kwandinofunga kuti Ndiko Kunanga CSS Anchor Positioning ndiyo nzira yandinonyanya kufarira izvozvi. Ndakanga ndisingazive kuti yakawanda sei iyo spec yainyatso shandiswa pandakatanga kuitarisa. Inokuita kuti utaure hukama pakati pekudonhedza uye chinokonzeresa chakananga muCSS, uye bhurawuza rinobata zvinorongeka. .trigger { anchor-zita: --my-trigger; }
.dropdown-menu { chinzvimbo: mhedziso; position-anchor: --my-trigger; pamusoro: anchor (pasi); kuruboshwe: anchor (kuruboshwe); chinzvimbo-try-fallbacks: flip-block, flip-inline; }
Iyo chinzvimbo-try-fallbacks pfuma ndiyo inoita kuti izvi zvikoshese kushandisa pamusoro pekuverenga kwemanyorero. Iyo bhurawuza inoedza kumwe kuisirwa isati yakanda mapfumo pasi, saka kudonhedza pazasi penzvimbo yekutarisa kunongoerekana kwakwira kumusoro pane kugurwa. Tsigiro yebrowser yakasimba muChromium-based browser uye inokura muSafari. Firefox inoda polyfill. Iyo @oddbird/css-anchor-positioning package inovhara iyo yakakosha spec. Ndarova dhizaini yemakesi nayo yaida kudonha kwandanga ndisingafungire, saka ibate sekusimudzira kunofambira mberi kana kuibatanidza neJavaScript fallback yeFirefox. Muchidimbu, zvinovimbisa asi kwete pasi rose. Edza mumabhurawuza ako anotariswa. Uye maererano nekuwanikwa kune chekuita, kuzivisa hukama hwekuona muCSS hakuudze muti wekuwanikwa chero chinhu. aria-controls, aria-yakawedzerwa, aria-haspopup - icho chikamu chichiri pauri. Dzimwe nguva Kugadzirisa Kuri Kungofambisa Iyo Element Ndisati ndasvika kune portal kana kuita maverengero ekuverenga, ini ndinogara ndichibvunza mubvunzo mumwechete kutanga: Kudonha uku kunoda here kugara mukati memupumburu mudziyo? Kana zvikasadaro, kufambisa iyo markup kune yepamusoro-level wrapper kunobvisa dambudziko zvachose, pasina JavaScript uye pasina kurongedza kuverenga. Izvi hazvigoneke nguva dzose. Kana bhatani uye kudonha zvakavharirwa muchikamu chimwe chete, kufambisa imwe pasina imwe kunoreva kufungazve iyo API yese. Asi kana iwe uchigona kuzviita, hapana chekugadzirisa. Dambudziko harisipo chete. Izvo Zvazvino CSS Zvichiri Zvisina Kugadziriswa CSS yasvika kure kure, asi pachine nzvimbo dzazvinokusiya. Nzvimbo: yakagadziriswa uye kushandura nyaya dzichiripo. Iri mune fungidziro nemaune, zvinoreva kuti hapana CSS workaround iripo. Kana iwe uri kushandisa raibhurari yeanimation inoputira dhizaini yako muchinhu chakashandurwa, wadzokera pakuda maportals kana anchor chinzvimbo. CSS Anchor Positioning iri kuvimbisa, asi itsva. Sezvambotaurwa, Firefox ichiri kuda polyfill panguva yandiri kunyora izvi. Ndakarova marongerwo emakesi nawo ayo aida kudonha kwandanga ndisingafungire. Kana iwe uchida kuenderana maitiro kune ese mabhurawuza nhasi, iwe uchiri kusvika kuJavaScript yezvikamu zvinonyepa. Iyo yekuwedzera yandakanyatso shandura mafambiro angu ekushanda ndeye HTML Popover API, yave kuwanikwa mumabhurawuza ese emazuva ano. Zvinhu zvine popover hunhu zvinopa mubrowser yepamusoro layer, pamusoro pezvese, pasina JavaScript inodiwa.
Kutiza kubata, bvisa-pa-tinya-kunze, uye yakasimba yekusvikika semantics zvinouya zvemahara kune zvinhu zvakaita sematurusi, mawijeti ekuburitsa, uye akaturikidzana ari nyore. Ndicho chishandiso chekutanga chandinosvika parizvino. Izvo zvakati, hazvigadzirise chinzvimbo. Inogadzirisa layering. Iwe uchiri kuda anchor positioning kana JavaScript kuti ienzanise popover kune yayo trigger. Iyo Popover API inobata iyo layering. Anchor positioning inobata kuiswa. Zvichishandiswa pamwe chete, zvinovhara zvakawanda zvezvawaimbosvika kuti raibhurari iite. Gwaro reSarudzo reMamiriro ako Mushure mekuita zvese izvi nenzira yakaoma, heino maitiro andinoita kufunga nezvesarudzo izvozvi.
Shandisa portal.Ndingashandisa izvi kana chinokonzeresa chichigara zvakadzika mumidziyo yemipumburu. Ndakashandisa iyi pateni yemamenu ekuita kwetafura uye ndaiibatanidza nekutarisa kudzoreredza uye macheki ekuwanika. Ndiyo yakavimbika sarudzo, asi bhajeti nguva yekuwedzera wiring. Shandisa fixed positioning.Iyi ndeye kana uri muvanilla JavaScript kana kuti lightweight framework uye inokwanisa kuona kuti hapana madzitateguru anoshandura kana mafirita. Zviri nyore kumisikidza uye nyore kugadzirisa, sekureba iyo imwe chete inomanikidza inobata. Shandisa CSS Anchor Positioning.Svika kune izvi kana bhurawuza rako rinotsigira. Kana Firefox tsigiro ichidikanwa, batanidza neiyo @oddbird polyfill. Apa ndipo panoperera chikuva chakananga uye chinozopedzisira chave chako kuenda-kusvika. Gadzirisa iyo DOM.Shandisa izvi kana chivakwa chichibvumira, uye iwe unoda zero runtime yakaoma. Ndinotenda kuti ingangove yakanyanya kuderedzwa sarudzo. Sanganisa mapatani.Ita izvi paunenge uchida kumisa anchor senzira yako yekutanga, yakabatana neJavaScript yekudzokera kumashure kumabhurawuza asingatsigirwi. Kana kuti portal yekuiswa kweDOM yakapetwa neGetBoundingClientRect() yekurongeka chaiko.
Mhedziso Ini ndaigara ndichibata iyi bug sechinhu-chimwechete - chimwe chinhu chekugadzirisa uye kuenderera mberi kubva. Asi pandakagara nayo kwenguva yakakwana kuti ndinzwisise ese matatu masisitimu anosanganisirwa - mafashama ekucheka, akaturikidzana mamiriro, uye aine mabhururu - yakamira kunzwa zvisina tsarukano. Ndaigona kutarisa kudonhedza kwakaputsika uye pakarepo kutsvaga kuti tateguru aive aita sei. Iko kuchinja kwekuverenga kwandakaita DOM ndiko kwaive kutora chaiko. Hapana mhinduro imwechete yechokwadi. Zvandaiwana zvaienderana nezvandaigona kudzora mucodebase: masuo apo muti wemadzitateguru wakanga usingafungidziriki; yakagadziriswa nzvimbo payaive yakachena uye iri nyore; kufambisa chinhu kana pasina chaindimisa; uye kumisa anchor izvozvi,kwandinogona. Chero chipi chaunozopedzisira chasarudza, usatore kuwanika sedanho rekupedzisira. Mune ruzivo rwangu, ndipo painosvetuka. Hukama hweARIA, iyo yekutarisa manejimendi, iyo keyboard maitiro - izvo hazvisi kupurisa. Ivo chikamu chezvinoita kuti chinhu chishande. Tarisa uone yakazara sosi kodhi mune yangu GitHub repo. Kuwedzera Kuverenga Aya ndiwo mareferensi andakaramba ndichidzoka kwaari ndichishanda kuburikidza neizvi:
The Stacking Context (MDN) "CSS Anchor Positioning Guide", Juan Diego Rodriguez "Kutanga Neiyo Popover API", Godstime Aburu Inoyangarara UI (floating-ui.com) CSS Overflow (MDN)
