Zomwe zimachitika nthawi zonse zimakhala zofanana, zomwe ndi tebulo la data mkati mwa chidebe chosunthika. Mzere uliwonse uli ndi menyu yochitirapo kanthu, kutsitsa kwakung'ono komwe kuli ndi zosankha zina, monga Sinthani, Duplicate, ndi Chotsani. Mumachimanga, chikuwoneka kuti chimagwira ntchito mwapadera, ndiyeno wina amachiyika mkati mwa div yopukutira ndipo zinthu zimagwa. Ndawona cholakwikacho m'ma codebase atatu osiyanasiyana: chidebe, stack, ndi chimango, zonse zosiyana. Vutoli, komabe, ndilofanana kwathunthu. Chotsitsacho chimadulidwa pamwamba pa chidebecho. Kapena zimawonekera kumbuyo zomwe ziyenera kukhala pansi pake. Kapena imagwira ntchito bwino mpaka wogwiritsa ntchito apukutu, ndiyeno imasuntha. Mumafika pa z-index: 9999. Nthawi zina zimathandiza, koma nthawi zina sizimachita chilichonse. Kusagwirizana kumeneko ndi chizindikiro choyamba chakuti chinachake chozama chikuchitika. Chifukwa chomwe chimabwereranso ndikuti makina atatu osiyana asakatuli akukhudzidwa, ndipo opanga ambiri amamvetsetsa iliyonse payokha koma samaganizira zomwe zimachitika zonse zitatu zikawombana: kusefukira, kusungika, komanso kukhala ndi midadada.
Mukamvetsetsa momwe onse atatu amalumikizirana, mitundu yolephera imasiya kumva mwachisawawa. Ndipotu, zimakhala zodziwikiratu. Zinthu Zitatu Zomwe Zimayambitsa Izi Tiyeni tiwone chilichonse mwazinthuzo mwatsatanetsatane. Vuto Losefukira Mukayika kusefukira: zobisika, kusefukira: pukutani, kapena kusefukira: auto pa chinthu, msakatuli amadula chilichonse chomwe chimapitilira malire ake, kuphatikiza mbadwa zokhazikika. .scroll-container { kusefukira: auto; kutalika: 300px; /* Izi zidzatsitsa kutsika, kuyimitsa kwathunthu */ }
.kutsika { udindo: mtheradi; /* Ziribe kanthu -- idadulidwabe ndi .scroll-container */ }
Zimenezo zinandidabwitsa nthaŵi yoyamba imene ndinathamangiramo. Ndinkaganiza kuti: mtheradi ungalole kuti chinthu chichoke pachidebe. Sizikutero. M'malo mwake, izi zikutanthauza kuti menyu yokhazikika imatha kudulidwa ndi kholo lililonse lomwe lili ndi mtengo wosefukira wosawoneka, ngakhale khololo silikhala ndi menyu omwe ali ndi block. Kudulira ndi kuika ndi machitidwe osiyana. Zimangokhalira kugundana m'njira zomwe zimawoneka mwachisawawa mpaka mutamvetsetsa zonse ziwiri.
Nachi chitsanzo cha React pogwiritsa ntchito createPortal:
lowetsani {createPortal} kuchokera ku 'react-dom'; lowetsani {useState, useEffect, useRef } kuchokera ku 'react';
ntchito Dropdown ({ anchorRef, isOpen, ana }) { const [malo, setPosition] = useState({pamwamba: 0, kumanzere: 0});
useEffect (() => { ngati (isOpen && anchorRef.current) { const rect = anchorRef.current.getBoundingClientRect(); setPosition({ pamwamba: rect.bottom + window.scrollY, kumanzere: rect.left + window.scrollX, }); } }, [isOpen, anchorRef]);
ngati (!isOpen) kubwerera null;
bwererani createPortal (
Ndipo, ndithudi, sitinganyalanyaze kupezeka. Zinthu zosasunthika zomwe zimawoneka pazolemba ziyenera kukhala zopezeka pa kiyibodi. Ngati dongosolo loyang'anako silikuyenda mwachilengedwe pakutsika kokhazikika, muyenera kuyang'anira pogwiritsa ntchito code. Ndikoyeneranso kuwonetsetsa kuti sichikhala pazokambirana zina popanda njira yochotsera. Ameneyo amakulumani inu mu kuyesa kiyibodi. CSS Anchor Positioning: Kumene Ndikuganiza Kuti Izi Zikulowera CSS Anchor Positioning ndiye komwe ndimakonda kwambiri pompano. Sindinadziwe kuti ndi zochuluka bwanji zomwe zidagwiritsidwa ntchito pomwe ndidaziwona koyamba. Zimakulolani kulengeza mgwirizano pakati pa dontho ndi choyambitsa chake mwachindunji mu CSS, ndipo msakatuli amayang'anira zogwirizanitsa. .yambitsa { nangula-dzina: --my-trigger; }
.menyu yotsitsa { udindo: mtheradi; nangula wa malo: --choyambitsa-changa; pamwamba: nangula (pansi); kumanzere: nangula (kumanzere); malo-kuyesera-kugwa: kutembenuza-kutchinga, kutembenuzira-inline; }
Malo-try-fallbacks katundu ndi omwe amachititsa kuti izi zikhale zoyenera kugwiritsa ntchito powerengera pamanja. Msakatuli amayesa kuyika kwina asanaleke, kotero kutsika pansi kwa malo owonera kumangoyang'ana m'mwamba m'malo moduliridwa. Thandizo la msakatuli ndilokhazikika pakusakatula kwa Chromium ndipo likukula mu Safari. Firefox ikufunika polyfill. Phukusi la @oddbird/css-anchor-positioning limakwirira zoyambira. Ndagunda m'mphepete mwake zomwe zimafuna zolakwika zomwe sindimayembekezera, chifukwa chake ziwonetseni ngati zowonjezera kapena kuziphatikiza ndiKubwerera kwa JavaScript kwa Firefox. Mwachidule, kulonjeza koma osati konsekonse panobe. Yesani mu msakatuli womwe mukufuna. Ndipo ponena za kupezeka, kulengeza ubale wowonekera mu CSS sikuuza mtengo wopezeka chilichonse. aria-controls, aria-expanded, aria-haspopup - gawolo likadali pa inu. Nthawi zina Kukonza Kumangosuntha Mbali Ndisanafikire pa portal kapena kuwerengera kolumikizana, nthawi zonse ndimafunsa funso limodzi poyamba: Kodi kutsika uku kukufunika kukhala mkati mwa chidebe cha mipukutu? Ngati sichoncho, kusuntha chizindikirocho kupita pachimake chapamwamba kumathetsa vutoli kwathunthu, popanda JavaScript komanso kuwerengera kogwirizana. Izi sizingatheke nthawi zonse. Ngati batani ndi kutsitsa zikuphatikizidwa mu gawo lomwelo, kusuntha imodzi popanda ina kumatanthauza kuganiziranso API yonse. Koma mukatha kuchita, palibe chomwe mungachite. Vuto kulibe. Zomwe CSS Zamakono Sizikuthabe CSS yafika patali pano, koma pali malo omwe amakugwetsani pansi. Udindo: zovuta zokhazikika ndi zosintha zikadalipo. Zili mwadala, zomwe zikutanthauza kuti palibe CSS workaround yomwe ilipo. Ngati mukugwiritsa ntchito laibulale yamakanema yomwe imakutira masanjidwe anu mu chinthu chosinthidwa, mwabwereranso pakufuna ma portal kapena nangula. CSS Anchor Positioning ikulonjeza, koma yatsopano. Monga tanena kale, Firefox imafunikirabe polyfill panthawi yomwe ndikulemba izi. Ndidachitapo kanthu pazida zomwe zimafunikira zomwe sindimayembekezera. Ngati mukufuna kuchita zinthu mosasinthasintha pa asakatuli onse lero, mukufikabe ku JavaScript pazinthu zovuta. Zowonjezera zomwe ndasinthira momwe ndimagwirira ntchito ndi HTML Popover API, yomwe tsopano ikupezeka m'masamba amakono onse. Zinthu zomwe zili ndi mawonekedwe a popover zimapereka pamwamba pa osatsegula, pamwamba pa chilichonse, popanda JavaScript yofunikira.
Kuthawika, kudina-pa-kunja, ndi mawu omveka opezeka mosavuta amabwera kwaulere pazinthu monga zida, ma widget owulula, ndi zokulirapo zosavuta. Ndi chida choyamba chomwe ndimafikira pano. Izi zati, sizithetsa kuyika. Amathetsa layering. Mukufunikirabe malo a nangula kapena JavaScript kuti mugwirizane ndi popover ndi choyambitsa chake. API ya Popover imayang'anira kusanjika. Kuyika kwa Nangula kumayang'anira kuyikapo. Zogwiritsidwa ntchito palimodzi, zimaphimba zambiri zomwe mumafikira ku library kuti muchite. Kalozera Wosankha Zomwe Muliri Pambuyo podutsa zonsezi movutikira, umu ndi momwe ndimaganizira za chisankho tsopano.
Gwiritsani ntchito portal.Ndingagwiritse ntchito izi pamene choyambitsa chimakhala mkati mwa zisa za mipukutu. Ndidagwiritsa ntchito pateni pamindandanda yazochita patebulo ndikuyiphatikiza ndi kubwezeretsanso komanso macheke a kupezeka. Ndiyo njira yodalirika kwambiri, koma nthawi ya bajeti ya mawaya owonjezera. Gwiritsani ntchito malo okhazikika. Izi ndi za mukakhala mu vanila JavaScript kapena chimango chopepuka ndipo mutha kutsimikizira kuti palibe kholo lomwe likugwiritsa ntchito masinthidwe kapena zosefera. Ndiosavuta kukhazikitsa komanso yosavuta kuwongolera, bola ngati cholepheretsa chimodzicho chikugwira. Gwiritsani ntchito CSS Anchor Positioning.Reach pa izi pamene thandizo la msakatuli wanu likulolani. Ngati thandizo la Firefox likufunika, liphatikizeni ndi @oddbird polyfill. Apa ndipamene nsanja ikupita ndipo pamapeto pake idzakhala njira yanu yofikira. Konzaninso DOM.Gwiritsani ntchito izi pomwe zomanga zimaloleza, ndipo mukufuna kusokoneza nthawi yothamanga. Ndikuganiza kuti ndiyo njira yocheperako kwambiri. Phatikizani mapatani.Chitani izi mukafuna kuyika nangula ngati njira yanu yoyamba, yolumikizidwa ndi JavaScript yobwereranso pamasakatuli omwe alibe. Kapena portal yoyika DOM yolumikizidwa ndi getBoundingClientRect() kuti mugwirizane bwino.
Mapeto Ndinkakonda kuchitira cholakwika ichi ngati nkhani yanthawi zonse - china chake choti ndisinthe ndikuchokapo. Koma nditakhala nayo nthawi yayitali kuti ndimvetsetse machitidwe onse atatu omwe akukhudzidwa - kudula kusefukira, kusungika, komanso kukhala ndi midadada - idasiya kumva mwachisawawa. Ndinkatha kuyang'ana pansi ndikuwona kuti ndi kholo liti lomwe linayambitsa. Kusintha kumeneko momwe ndidawerengera DOM kunali kuchotsera kwenikweni. Palibe yankho limodzi lolondola. Zomwe ndinafikira zimatengera zomwe ndingathe kuzilamulira mu codebase: zipata pamene mtengo wa makolo unali wosadziŵika; malo okhazikika pamene anali oyera komanso osavuta; kusuntha chinthu pamene palibe chimene chinali kundiletsa; ndikuyika nangula tsopano,kumene ndingathe. Chilichonse chomwe mumasankha, musatenge kupezeka ngati gawo lomaliza. M'malingaliro anga, ndi momwe zimadumphira. Maubale a ARIA, kasamalidwe koyang'anira, kachitidwe ka kiyibodi - izi sizopukutidwa. Iwo ndi gawo la zomwe zimapangitsa kuti chinthucho chigwire ntchito. Onani gwero lathunthu mu repo yanga ya GitHub. Kuwerenga Mowonjezereka Nawa maumboni omwe ndakhala ndikubwereranso pamene ndikugwira ntchito iyi:
The Stacking Context (MDN) "CSS Anchor Positioning Guide", Juan Diego Rodriguez "Kuyamba Ndi Popover API", Godstime Aburu UI yoyandama (floating-ui.com) CSS Overflow (MDN)
