Imeko iphantse ifane, eyitafile yedatha ngaphakathi kwesikhongozeli esiskrolekayo. Umqolo ngamnye unemenu yesenzo, ukuhla okuncinci okunokhetho oluthile, njengoHlela, Phindaphinda, kwaye Cima. Uyayakha, kubonakala ngathi isebenza ngokugqibeleleyo yodwa, kwaye ke umntu uyibeka ngaphakathi kwe-div eshukumayo kwaye izinto ziyawa. Ndiyibonile le bug ngqo kwiikhowudi ezintathu ezahlukeneyo: isikhongozeli, isitaki, kunye nesakhelo, zonke zahlukile. I-bug, nangona kunjalo, iyafana ngokupheleleyo. Ukwehla kunqunyulwa kumda wesikhongozeli. Okanye ibonisa emva komxholo ofanele ukuba ungaphantsi kwayo. Okanye isebenza kakuhle de umsebenzisi ajikeleze, kwaye emva koko iyakhukuliseka. Ufikelela ku-z-index: 9999. Ngamanye amaxesha iyanceda, kodwa ngamanye amaxesha ayenzi nto kwaphela. Oko kungangqinelani kusikhondo sokuqala sokuba kukho into enzulu eyenzekayo. Isizathu sokuba ihlale ibuya kukuba iinkqubo ezintathu zesikhangeli esahlukileyo zibandakanyeka, kwaye uninzi lwabaphuhlisi baqonda nganye nganye yodwa kodwa bangaze bacinge malunga nokuba kwenzeka ntoni xa zontathu zingqubana: ukuphuphuma, ukupakisha iimeko, kunye neziqulathe iibhloko.
Nje ukuba uqonde ukuba banxibelelana njani bobathathu, iindlela zokusilela ziyeka ukuziva ngokungakhethiyo. Enyanisweni, ziba yinto eqikelelwayo. Izinto Ezithathu Ngokwenene Ezibangela Oku Makhe sijonge nganye kwezi zinto ngokweenkcukacha. Ingxaki Yokuphuphuma Xa ucwangcisa ukuphuphuma: efihliweyo, ukuphuphuma: skrola, okanye ukuphuphuma: ngokuzenzekela kwinto ethile, isikhangeli siya kuqhotyosha nantoni na edlulela ngaphaya kwemida yayo, kubandakanya inzala ebekwe ngokupheleleyo. .skrola-isikhongozeli { ukuphuphuma: auto; ubude: 300px; /* Oku kuya kliphu ukwehla, ukuyeka ngokupheleleyo */ }
.ukwehla { isikhundla: ngokupheleleyo; /* Ayinamsebenzi -- isanqunyulwa ngu .scroll-container */ }
Oko kwandothusa okokuqala xa ndibalekela kuyo. Ndithathe isikhundla: ngokupheleleyo kuya kuvumela into ukuba ibaleke ukunqunyulwa kwesikhongozeli. Akunjalo. Ukuziqhelanisa, oko kuthetha ukuba imenyu ebekwe ngokupheleleyo inokunqunyulwa nakweyiphi na isinyanya esinexabiso lokuphuphuma elingabonakaliyo, nokuba loo khokho ayisiyiyo ibhlokhi yemenyu. Ukunqunqa kunye nokubekwa ziinkqubo ezahlukeneyo. Zisuka nje zingqubane ngeendlela ezijongeka ngokungakhethiyo ngokupheleleyo ude uziqonde zombini.
Nanku umzekelo React usebenzisa createPortal:
ngenisa ngaphandle { createPortal } ukusuka 'react-dom'; ngenisa ngaphandle {useState, useEffect, useRef } ukusuka 'react';
umsebenzi Ukwehla ({ anchorRef, isOpen, abantwana }) { const [indawo, setPosition] = useState({ phezulu: 0, ekhohlo: 0});
useEffect (() => { ukuba (Ivuliwe && anchorRef.current) { const rect = anchorRef.current.getBoundingClientRect(); iSimo sokumisela({ phezulu: rect.bottom + window.scrollY, ekhohlo: rect.left + window.scrollX, }); } }, [isOpen, anchorRef]);
ukuba (!isOpen) buyisela i-null;
buyisela yenzaIPortal (
Kwaye, ngokuqinisekileyo, asikwazi ukukubetha ngoyaba ukufikeleleka. Izinto ezilungisiweyo ezivela phezu komxholo kusafuneka zifikeleleke kwi-keyboard. Ukuba umyalelo wokugxila awuhambi ngokwendalo kwi-dropdown emiselweyo, kuya kufuneka uyilawule usebenzisa ikhowudi. Kukwafanelekile ukujonga ukuba ayihlali ngaphaya kweminye imixholo esebenzisanayo kungekho ndlela yokuyigxotha. Lowo ukuluma kuvavanyo lwebhodibhodi. Ukuma kwe-Anchor ye-CSS: Apho Ndicinga ukuba siSingise phi I-CSS Anchor Positioning lelona cala ndinomdla kulo ngoku. Bendingaqinisekanga ukuba ingakanani i-spec esebenzayo xa ndiqala ukuyijonga. Ikuvumela ukuba ubhengeze ubudlelwane phakathi kokwehla kunye ne-trigger yayo ngqo kwi-CSS, kwaye isikhangeli siphatha izinxibelelanisi. .qalisa { I-ankile-igama: --i-trigger yam; }
.imenyu eyehlayo { isikhundla: ngokupheleleyo; indawo-iankile: --i-trigger yam; phezulu: iankile(ezantsi); ekhohlo: iankile(ekhohlo); i-position-try-fallbacks: i-flip-block, i-flip-inline; }
Ipropathi ye-position-try-fallbacks yiyo eyenza ukuba oku kuxabiseke kusetyenziswe ngaphezulu kokubala ngesandla. Isikhangeli sizama ezinye iindawo zokubekwa phambi kokuba unikezele, ngoko ke ukuhla ezantsi kwendawo yokujonga ngokuzenzekelayo kuya phezulu endaweni yokunqunyulwa. Inkxaso yebhrawuza yomelele kwizikhangeli ezisekwe kwiChromium kwaye ikhula kwiSafari. IFirefox idinga i-polyfill. Iphakheji ye-@oddbird/css-anchor-positioning igubungela i-core spec. Ndibethe imiphetho yoyilo ngayo ebifuna ukusilela bendingakhange ndiyicinge, ke yiphathe njengophuculo oluqhubela phambili okanye uyidibanise neUkubuyisela iJavaScript yeFirefox. Ngamafutshane, kuyathembisa kodwa hayi jikelele okwangoku. Vavanya kwizikhangeli zakho ekujoliswe kuzo. Kwaye ngokubhekiselele ekufikelelekeni, ukubhengeza ubudlelwane obubonakalayo kwi-CSS ayixeleli umthi wokufikeleleka nantoni na. i-aria-controls, i-aria-expanded, i-aria-haspopup - loo ndawo isekho kuwe. Ngamanye amaxesha ulungiso luhamba nje i-Element Phambi kokufikelela kwi-portal okanye ukwenza izibalo zolungelelwaniso, ndihlala ndibuza umbuzo omnye kuqala: Ngaba oku kuhla kuyakufuna ngokwenene ukuhlala ngaphakathi kwesikhongozeli sokuskrola? Ukuba ayenzi njalo, ukuhambisa imarkup kwi-wrapper yomgangatho ophezulu kuphelisa ingxaki ngokupheleleyo, ngaphandle kweJavaScript kwaye akukho lungelelaniso lwezibalo. Oku akusoloko kusenzeka. Ukuba iqhosha kunye nokwehla kufakwe kwicandelo elifanayo, ukuhambisa enye ngaphandle komnye kuthetha ukucinga kwakhona yonke i-API. Kodwa xa uyenza, akukho nto yokuyilungisa. Ingxaki ayikho nje. Yeyiphi i-CSS yanamhlanje engasombululeki I-CSS ihambe indlela ende apha, kodwa kusekho iindawo ekuvumela ukuba uphantsi. Isikhundla: imiba elungisiweyo kunye nokuguqula isekhona. Ikwi-spec ngenjongo, oko kuthetha ukuba akukho msebenzi we-CSS ukhona. Ukuba usebenzisa ilayibrari yoopopayi esonga uyilo lwakho kwinto eguquliweyo, ubuyela ekufuneni iiphothali okanye ukuma kweankile. I-CSS Anchor Positioning iyathembisa, kodwa intsha. Njengoko bekutshiwo ngaphambili, iFirefox isafuna i-polyfill ngeli xesha ndibhala oku. Ndibethe imicephe yoyilo kunye nayo efuna ukusilela endingakhange ndikulindele. Ukuba ufuna isimilo esingaguqukiyo kuzo zonke iibhrawuza namhlanje, usafikelela kwiJavaScript kwiindawo ezinobuqhinga. Ukongezwa endikutshintshileyo ukuhamba kwam komsebenzi yiHTML Popover API, ngoku ekhoyo kuzo zonke izikhangeli zangoku. Izinto ezinophawu lwe-popover lunikezela kwinqanaba eliphezulu lesikhangeli, ngaphezu kwayo yonke into, ngaphandle kokumiswa kweJavaScript efunekayo.
Ukuphatha ukubaleka, ukugxotha-ngocofa-ngaphandle, kunye nesemantics yofikelelo oluluqilima luza simahla kwizinto ezinjengeengcebiso zesixhobo, iwijethi zokudiza, kunye nokwaleka okulula. Sisixhobo sokuqala endifikelela kuso ngoku. Oko kwathiwa, ayisombululi indawo. Isombulula umaleko. Usafuna ukuma kweankile okanye iJavaScript ukulungelelanisa i-popover kwi-trigger yayo. IPopover API iphatha umaleko. Ukubekwa kwe-ankile kubamba indawo. Zisetyenziswa kunye, zigubungela uninzi lwezinto onokuthi ufikelele kwithala leencwadi ukuba ukwenze. Isikhokelo seSigqibo seMeko yakho Emva kokuhamba ngayo yonke le ndlela inzima, nantsi indlela endicinga ngayo ngokhetho ngoku.
Sebenzisa i-portal. Ndingayisebenzisa le nto xa i-trigger ihlala nzulu kwizikhongozeli zokuskrola ezifakwe kwindlwane. Ndisebenzise le pateni kwiimenu zentshukumo yetheyibhile kwaye ndiyibhanqise ngogcino lobuyiselo kunye nofikelelo lokukhangela. Lolona khetho luthembekileyo, kodwa ixesha lohlahlo lwabiwo-mali lwe-wiring eyongezelelweyo. Sebenzisa indawo esisigxina. Le yeyaxa ukwi-vanilla JavaScript okanye isakhelo esikhaphukhaphu kwaye inokuqinisekisa ukuba akukho sinyanya sisebenza kwiinguqu okanye izihluzi. Kulula ukuseta kwaye kulula ukuyilungisa, okoko nje isithintelo esinye sibambe. Sebenzisa i-CSS Anchor Positioning.Fikelela kule nto xa inkxaso yebrawuza yakho ikuvumela. Ukuba inkxaso yeFirefox iyafuneka, yidibanise ne @oddbird polyfill. Kulapho iqonga liya kuthi ekugqibeleni lisingise khona kwaye ekugqibeleni liya kuba yindlela yakho yokuhamba. Lungisa ngokutsha i-DOM.Sebenzisa oku xa uyilo lukuvumela, kwaye ufuna ukungabikho kobunzima bexesha lokubaleka. Ndiyakholelwa ukuba lolona khetho luphantsi kakhulu. Dibanisa iipatheni.Yenza oku xa ufuna ukuma kweankile njengendlela yakho yokuqala, idityaniswe neJavaScript ebuyela umva kwizikhangeli ezingaxhaswanga. Okanye i-portal yokubekwa kwe-DOM edityaniswe ne-getBundingClientRect() ukwenzela ukuchaneka kolungelelwaniso.
Ukuqukumbela Bendidla ngokuyiphatha le bug njengomcimbi omnye-into ekufuneka uyipeyishe kwaye uqhubeke usuka kuyo. Kodwa ndakuba ndihleli nayo ixesha elide ngokwaneleyo ukuba ndiqonde zonke iinkqubo ezintathu ezibandakanyekayo - ukunqunyulwa okuphuphumayo, ukupakisha iimeko, kunye neebhloko eziqulathe iibhloko - iyekile ukuziva ingenamkhethe. Ndandikwazi ukujonga ithontsi eyophukileyo ndize ngoko nangoko ndikhangele ukuba yeyiphi na isinyanya. Olo tshintsho kwindlela endifunda ngayo i-DOM yayiyeyona nto ithathayo. Akukho mpendulo ilungileyo. Oko ndifikelele kuko kwakuxhomekeke kwinto endinokuyilawula kwi-codebase: ii-portals xa umthi wezinyanya wawungenakuqikelelwa; indawo emiselweyo xa icocekile kwaye ilula; ukuhambisa isiqalelo xa kungekho nto indiyekileyo; kunye nokumiswa kwe-ankile ngoku,apho ndingakwazi khona. Nantoni na ogqiba ukuyikhetha, musa ukuphatha ukufikeleleka njengenyathelo lokugqibela. Ngokwamava am, kulapho kanye xa itsitywa. Ubudlelwane be-ARIA, ulawulo logxininiso, indlela yokuziphatha yebhodibhodi - ezo aziyipolishi. Bayinxalenye yento eyenza ukuba into isebenze ngokwenene. Jonga ikhowudi yomthombo ogcweleyo kwi-repo yam ye-GitHub. UFundo oluGqibeleleyo Ezi ziingqinisekiso ebendihlala ndibuyela kuzo ngelixa ndisebenza ngoku:
Umxholo wokupakisha (MDN) "I-CSS Anchor Positioning Guide", uJuan Diego Rodriguez “Ukuqalisa ngePopover API”, Godstime Aburu I-UI edadayo (floating-ui.com) Ukuphuphuma kwe-CSS (MDN)
