Tá an cás beagnach i gcónaí mar an gcéanna, is é sin tábla sonraí taobh istigh de choimeádán inscrollaithe. Tá roghchlár gníomhaíochta ag gach sraith, anuas beag le roinnt roghanna, mar Edit, Dúblach, agus Scrios. Tógann tú é, is cosúil go n-oibríonn sé go foirfe ina n-aonar, agus ansin cuireann duine éigin taobh istigh den div scrollable sin agus titeann rudaí as a chéile. Tá an fabht cruinn seo feicthe agam i dtrí bhunachar cód éagsúla: an coimeádán, an chruach, agus an creat, iad uile difriúil. Tá an fabht, áfach, go hiomlán comhionann. Gearrtar an anuas ar imeall an choimeádáin. Nó taispeánann sé taobh thiar d'ábhar ba chóir a bheith faoi bhun sé go loighciúil. Nó oibríonn sé go breá go dtí go scrollaíonn an t-úsáideoir, agus ansin drifts sé. Sroicheann tú le haghaidh z-innéacs: 9999. Uaireanta cabhraíonn sé, ach uaireanta eile ní dhéanann sé fíor rud ar bith. Is í an neamhréireacht sin an chéad leid go bhfuil rud éigin níos doimhne ag tarlú. Is é an chúis a choinníonn sé ag teacht ar ais ná go bhfuil trí chóras brabhsálaí ar leith i gceist, agus tuigeann an chuid is mó de na forbróirí gach ceann ina n-aonar ach ní smaoiníonn siad riamh ar cad a tharlaíonn nuair a imbhuaileann na trí cinn: ró-shreabhadh, comhthéacsanna cruachta, agus bloic ina bhfuil.
Nuair a thuigeann tú conas a idirghníomhaíonn na trí cinn, stopann na modhanna teip ag mothú randamach. Go deimhin, éiríonn siad intuartha. Na Trí Nithe Is Cúiseanna Seo I ndáiríre Breathnaímid go mion ar gach ceann de na míreanna sin. An Fhadhb Overflow Nuair a shocraíonn tú ró-shreabhadh: i bhfolach, thar maoil: scrollbharra, nó thar maoil: uathoibríoch ar eilimint, gearrfaidh an brabhsálaí aon rud a théann thar a theorainneacha, lena n-áirítear sliocht atá suite go hiomlán. .scroll-coimeádán { thar maoil: uathoibríoch; airde: 300px; /* Gearrfaidh sé seo an anuas, lánstad */ }
. anuas { seasamh: absalóideach; /* Is cuma -- fós gearrtha ag .scroll-container */ }
Chuir sé sin ionadh orm an chéad uair a rith mé isteach ann. Ghlacfainn leis an seasamh: ligfeadh absalóideach d’eilimint éalú ó ghearrthóg coimeádáin. Ní dhéanann sé. Go praiticiúil, ciallaíonn sé sin gur féidir le sinsear ar bith a bhfuil luach thar maoil neamh-fheiceálach aige roghchlár atá suite go hiomlán a ghearradh amach, fiú murab é an sinsear an bloc ina bhfuil an roghchlár. Is córais ar leith iad bearradh agus suíomh. Tarlaíonn siad ach imbhuaileann siad ar bhealaí a fhéachann go hiomlán randamach go dtí go dtuigeann tú an dá rud.
Seo sampla React ag baint úsáide as createPortal:
iompórtáil { createPortal } ó 'react-dom'; allmhairiú { useState, useEffect, useRef } ó 'react';
feidhm anuas ({ anchorRef, isOpen, leanaí }) { const [position, setPosition] = useState({ barr: 0, clé: 0 });
useEffect(() => { más rud é (IsOpen && anchorRef.current) { const rect = anchorRef.current.getBoundingClientRect(); setPosition({ barr: rect.bun + fuinneog.scrollY, ar chlé: rect.left + window.scrollX, }); } }, [isOpen, anchorRef]);
má (!isOpen) seol ar ais null;
tabhair ar ais createPortal(
Agus, ar ndóigh, ní féidir linn neamhaird a dhéanamh ar inrochtaineacht. Caithfidh gnéithe seasta a thaispeánfar thar ábhar a bheith insroichte fós ar an méarchlár. Mura n-aistríonn an t-ordú fócais isteach sa anuas seasta, beidh ort é a bhainistiú le cód. Is fiú a sheiceáil freisin nach suíonn sé thar ábhar idirghníomhach eile agus nach bhfuil aon bhealach ann é a dhíbhe. Greann an duine sin tú i dtástáil méarchláir. Suíomh Ancaire CSS: An Áit a Sílim Seo Ceannteideal Is é CSS Anchor Positioning an treo is mó a bhfuil suim agam ann faoi láthair. Ní raibh mé cinnte cé mhéad den tsonraíocht a bhí inúsáidte i ndáiríre nuair a d’fhéach mé air ar dtús. Ligeann sé duit an gaol idir anuas agus a truicir a dhearbhú go díreach i CSS, agus láimhseálann an brabhsálaí na comhordanáidí. .trigger { ancaire-ainm: --my-trigger; }
. roghchlár anuas { seasamh: absalóideach; seasamh-ancaire: --my-trigger; barr: ancaire (bun); ar chlé: ancaire (ar chlé); suímh-triail-fallbacks: smeach-bloc, smeach-inlíne; }
Is í an mhaoin seasamh-triail-fallbacks is fiú é seo a úsáid thar ríomh láimhe. Déanann an brabhsálaí iarracht socrúcháin eile sula n-éiríonn sé as, agus mar sin sleamhnaíonn anuas ag bun an amhairc aníos go huathoibríoch in ionad é a bheith scoite. Tá tacaíocht do bhrabhsálaí láidir i mbrabhsálaithe Cróimiam-bhunaithe agus ag fás i Safari. Teastaíonn polyfill ó Firefox. Clúdaíonn an pacáiste @oddbird/css-anchor-positioning an sonra lárnach. Bhain mé cásanna imeall an leagain amach leis ina raibh gá le fallbacks nach raibh mé ag súil leo, mar sin déan é a chóireáil mar fheabhsúchán forásach nó cuir le chéile éJavaScript fallback le haghaidh Firefox. I mbeagán focal, tá tuar dóchais inti ach ní uilíoch fós. Tástáil i do bhrabhsálaí sprice. Agus a mhéid a bhaineann le hinrochtaineacht, ní insíonn dearbhú caidreamh amhairc i CSS faic don chrann inrochtaineachta. aria-rialuithe, aria-leathnaithe, aria-haspopup - tá an chuid sin fós ar tú. Uaireanta Tá an Deisigh Just a Bogadh an Eilimint Sula sroichfidh mé tairseach nó sula ndéanann mé ríomhanna comhordanáidí, cuirim ceist amháin ar dtús i gcónaí: An gá go mbeadh an anuas seo i do chónaí laistigh den choimeádán scrollaithe? Mura ndéanann sé, má bhogtar an mharcáil go fillteán ardleibhéil cuireann sé deireadh leis an bhfadhb go hiomlán, gan JavaScript agus gan aon ríomhanna comhordanáidí. Níl sé seo indéanta i gcónaí. Má tá an cnaipe agus an t-anuas cuimsithe sa chomhpháirt chéanna, ag bogadh ceann amháin gan an modh eile athmhachnamh a dhéanamh ar an API iomlán. Ach nuair is féidir leat é a dhéanamh, níl aon rud le dífhabhtú. Níl an fhadhb ann. Cad nach Réitíonn CSS Nua-Aimseartha Fós Tá CSS tar éis teacht ar bhealach fada anseo, ach fós tá áiteanna ann a ligeann sé síos duit. An seasamh: tá saincheisteanna seasta agus claochlaithe fós ann. Tá sé sa spec d’aon ghnó, rud a chiallaíonn nach bhfuil aon réiteach oibre CSS ann. Má tá leabharlann beochana in úsáid agat a chumhdaíonn do leagan amach in eilimint chlaochlaithe, tá tairseacha nó suíomh ancaire de dhíth ort ar ais. CSS Anchor Positioning Tá tuar dóchais inti, ach nua. Mar a luadh cheana, tá polyfill fós ag teastáil ó Firefox ag an am a scríobh mé é seo. Bhain mé cásanna imeall an leagain amach leis ina raibh gá le fallbacks nach raibh mé ag súil leo. Má theastaíonn iompar comhsheasmhach uait ar fud na mbrabhsálaithe go léir inniu, tá JavaScript fós á lorg agat le haghaidh na gcodanna deacra. Is é an breiseán ar athraigh mé mo sreabhadh oibre dó i ndáiríre ná an HTML Popover API, atá ar fáil anois i ngach brabhsálaí nua-aimseartha. Rindreáil eilimintí leis an tréith popover i gciseal barr an bhrabhsálaí, os cionn gach rud, gan aon suíomh JavaScript ag teastáil.
Tagann láimhseáil éalaithe, dífhostú-ar-cliceáil-lasmuigh, agus semantics inrochtaineachta soladach saor in aisce le haghaidh rudaí cosúil le leideanna uirlisí, giuirléidí nochta, agus forleagan simplí. Sin an chéad uirlis a bhainim amach faoi láthair. É sin ráite, ní réitíonn sé suíomh. Réitíonn sé layering. Teastaíonn suíomh ancaire nó JavaScript uait fós chun aníos a ailíniú lena thruicear. Láimhseálann API Popover an cisealú. Láimhseálann suíomh ancaire an socrúchán. Agus iad á n-úsáid le chéile, clúdaíonn siad an chuid is mó de na rudaí a bheadh agat cheana féin chun leabharlann a dhéanamh. Treoir Cinnidh Do Do Staid Tar éis dul tríd seo ar fad ar an mbealach crua, seo mar a smaoiním ar an rogha anois.
Úsáid tairseach.D’úsáidfinn é seo nuair a chónaíonn an truicear go domhain i gcoimeádáin scrollaithe neadaithe. Bhain mé úsáid as an bpatrún seo le haghaidh biachláir gníomh tábla agus péireáil mé é le hathchóiriú fócas agus seiceálacha inrochtaineachta. Is é an rogha is iontaofa é, ach am buiséid don sreangú breise. Bain úsáid as suíomh seasta. Tá sé seo le haghaidh nuair a bhíonn JavaScript fanaile nó creat éadrom agat agus ní féidir leat a fhíorú nach bhfuil claochluithe nó scagairí i bhfeidhm ag sinsear. Tá sé simplí a shocrú agus simplí le dífhabhtú, chomh fada agus a bhíonn an srian amháin sin. Bain úsáid as CSS Anchor Positioning.Reach chuige seo nuair a cheadaíonn tacaíocht do bhrabhsálaí é. Má tá tacaíocht Firefox ag teastáil, péireáil leis an @oddbird polyfill é. Seo an áit a bhfuil an t-ardán chun tosaigh sa deireadh agus is é an cur chuige a bheidh agat sa deireadh. Déan an DOM a athstruchtúrú. Bain úsáid as seo nuair a cheadaíonn an ailtireacht é, agus go dteastaíonn castacht ama rite nialasach uait. Creidim gur dócha gurb é an rogha is tearcráiteach é. Comhcheangail patrúin.Déan é seo nuair is mian leat suíomh ancaire a bheith mar do phríomhchur chuige, agus tú ag péireáil le cúlshraith JavaScript do bhrabhsálaithe nach dtacaítear leo. Nó tairseach le haghaidh socrúcháin DOM péireáilte le getBoundingClientRect() chun cruinneas a chomhordú.
Conclúid Ba ghnách liom an fabht seo a chóireáil mar shaincheist aonuaire - rud éigin le paiste agus bogadh ar aghaidh uaidh. Ach nuair a shuigh mé leis fada go leor chun na trí chóras a bhí i gceist a thuiscint - bearradh ró-shreabhadh, comhthéacsanna cruachta, agus bloic ina raibh - níor mhothaigh sé randamach. D’fhéadfainn féachaint ar anuas briste agus lorg láithreach cé acu sinsear a bhí freagrach. Ba é an t-athrú sin ar an gcaoi ar léigh mé an DOM an fíor beir leat. Níl aon fhreagra ceart amháin ann. Bhí an méid a bhain mé amach ag brath ar an méid a d'fhéadfainn a rialú sa bhunchód: tairseacha nuair a bhí an crann sinsear dothuartha; suíomh seasta nuair a bhí sé glan agus simplí; ag bogadh an eilimint nuair nach raibh aon rud ag cur stad orm; agus suíomh ancaire anois,nuair is féidir liom. Cibé rud a roghnaíonn tú ar deireadh, ná caith leat inrochtaineacht mar an chéim dheireanach. I mo thaithí féin, sin é go díreach nuair a dhéantar é a scipeáil. Na caidrimh ARIA, an bhainistíocht fócais, an iompar méarchláir - ní snas iad sin. Tá siad mar chuid de cad a chuireann an rud ag obair i ndáiríre. Seiceáil an cód foinse iomlán i mo repo GitHub. Tuilleadh Léitheoireachta Seo iad na tagairtí a choinnigh mé ag teacht ar ais chucu agus mé ag obair tríd seo:
An Comhthéacs Cruachta (MDN) “Treoir Suiteála Ancaire CSS”, Juan Diego Rodriguez “Ag Tosú Leis an Popover API”, Godstime Aburu UI ar snámh (floating-ui.com) CSS Overflow (MDN)
