Ang senaryo hapit kanunay parehas, nga usa ka lamesa sa datos sa sulod sa usa ka sulud nga sulud. Ang matag laray adunay menu sa aksyon, usa ka gamay nga dropdown nga adunay pipila nga mga kapilian, sama sa Edit, Duplicate, ug Delete. Gitukod nimo kini, ingon og kini nagtrabaho nga hingpit nga nag-inusara, ug unya adunay usa nga nagbutang niini sa sulod sa scrollable div ug ang mga butang nabungkag. Nakita nako kining eksaktong bug sa tulo ka lain-laing mga codebase: ang sudlanan, ang stack, ug ang framework, ang tanan lainlain. Ang bug, bisan pa, hingpit nga managsama. Ang dropdown maputol sa ngilit sa sudlanan. O kini nagpakita sa luyo sa sulod nga kinahanglan nga makatarunganon nga anaa sa ubos niini. O kini molihok nga maayo hangtod ang tiggamit mag-scroll, ug dayon kini maanod. Nakab-ot nimo ang z-index: 9999. Usahay kini makatabang, apan sa ubang mga higayon kini wala'y mahimo. Kana nga panagsumpaki mao ang unang timailhan nga adunay mas lawom nga nahitabo. Ang rason nga nagpadayon kini pagbalik mao nga tulo ka bulag nga mga sistema sa browser ang nalambigit, ug kadaghanan sa mga developer nakasabut sa matag usa sa iyang kaugalingon apan wala gyud maghunahuna kung unsa ang mahitabo kung ang tanan nga tulo nagbangga: pag-awas, pag-stack sa mga konteksto, ug adunay mga bloke.
Kung nahibal-an nimo kung giunsa ang tanan nga tulo nga nakig-uban, ang mga mode sa kapakyasan mohunong sa pagbati nga random. Sa pagkatinuod, sila mahimong matag-an. Ang Tulo ka Butang nga Tinuod nga Nagpahinabo Niini Atong tan-awon ang matag usa sa mga butang sa detalye. Ang Problema sa Pag-awas Kung imong gibutang ang overflow: gitago, overflow: scroll, o overflow: awto sa usa ka elemento, ang browser mag-clip sa bisan unsang butang nga lapas sa mga limitasyon niini, lakip ang hingpit nga posisyon nga mga kaliwat. .scroll-container { pag-awas: awto; gitas-on: 300px; /* Kini mag-clip sa dropdown, full stop */ }
.dropdown { posisyon: hingpit; /* Dili igsapayan -- giputol gihapon sa .scroll-container */ }
Natingala ko sa unang higayon nga nakasugat ko niini. Naghunahuna ko nga posisyon: hingpit nga tugotan ang usa ka elemento nga makalingkawas sa clipping sa sudlanan. Dili kini. Sa praktis, kana nagpasabut nga ang usa ka hingpit nga posisyon nga menu mahimong putlon sa bisan unsang katigulangan nga adunay dili makita nga kantidad sa pag-awas, bisan kung kana nga katigulangan dili ang sulud sa sulud sa menu. Ang pag-clipping ug pagpoposisyon managlahi nga mga sistema. Nahitabo lang nga magkabangga sila sa mga paagi nga tan-awon nga random hangtod nga masabtan nimo ang duha.
Ania ang usa ka pananglitan sa React gamit ang createPortal:
import { createPortal } gikan sa 'react-dom'; import {useState, useEffect, useRef} gikan sa 'react';
function Dropdown({ anchorRef, isOpen, mga bata}) { const [posisyon, setPosition] = useState({ibabaw: 0, wala: 0});
useEffect(() => { kon (isOpen && anchorRef.current) { const rect = anchorRef.current.getBoundingClientRect(); setPosisyon({ ibabaw: rect.bottom + window.scrollY, wala: rect.left + window.scrollX, }); } }, [isOpen, anchorRef]);
kung (!isOpen) ibalik ang null;
ibalik ang createPortal(
Ug, siyempre, dili nato ibaliwala ang pagka-access. Ang mga naayos nga elemento nga makita sa sulud kinahanglan nga maabut sa keyboard. Kung ang han-ay sa pag-focus dili natural nga mobalhin sa gitakda nga dropdown, kinahanglan nimo nga pagdumala kini gamit ang code. Angayan usab nga susihon nga wala kini naglingkod sa ubang mga interactive nga sulud nga wala’y paagi aron isalikway kini. Kanang mopaak nimo sa keyboard testing. CSS Anchor Positioning: Diin Sa Akong Hunahuna Kini ang Ulohan Ang CSS Anchor Positioning mao ang direksyon nga labing interesado nako karon. Dili ko sigurado kung unsa kadaghan sa spec ang magamit sa una nakong pagtan-aw niini. Gitugotan ka niini nga ipahayag ang relasyon tali sa usa ka dropdown ug ang gatilyo niini direkta sa CSS, ug ang browser ang nagdumala sa mga koordinasyon. .trigger { anchor-name: --my-trigger; }
.dropdown-menu { posisyon: hingpit; posisyon-angkla: --my-trigger; ibabaw: angkla(ubos); wala: angkla(wala); position-try-fallbacks: flip-block, flip-inline; }
Ang position-try-fallbacks nga kabtangan mao ang naghimo niini nga bili sa paggamit sa usa ka manwal nga kalkulasyon. Ang browser mosulay sa alternatibong mga placement sa dili pa mohunong, mao nga ang usa ka dropdown sa ubos sa viewport awtomatikong mo-flip pataas imbes nga putlon. Ang suporta sa browser lig-on sa mga browser nga nakabase sa Chromium ug nagtubo sa Safari. Ang Firefox nanginahanglan usa ka polyfill. Ang @oddbird/css-anchor-positioning package naglangkob sa core spec. Naigo ko ang mga kaso sa sulud sa layout niini nga nanginahanglan mga fallback nga wala nako damha, busa tagda kini ingon usa ka progresibo nga pagpaayo o ipares kini sa usa kaJavaScript fallback alang sa Firefox. Sa laktod, promising pero dili pa universal. Pagsulay sa imong target nga mga browser. Ug kon bahin sa accessibility, ang pagdeklarar og biswal nga relasyon sa CSS wala magsulti sa accessibility tree bisan unsa. aria-controls, aria-expanded, aria-haspopup — kana nga bahin anaa kanimo. Usahay Ang Pag-ayo Naglihok Lang Ang Elemento Sa dili pa makaabot sa usa ka portal o maghimo og mga kalkulasyon sa koordinasyon, kanunay kong mangutana una og usa ka pangutana: Kinahanglan ba nga kini nga dropdown mabuhi sulod sa sudlanan sa scroll? Kung dili, ang pagbalhin sa markup ngadto sa mas taas nga lebel nga wrapper makawagtang sa problema sa hingpit, nga walay JavaScript ug walay koordinasyon nga mga kalkulasyon. Dili kini kanunay nga posible. Kung ang buton ug dropdown gi-encapsulated sa parehas nga sangkap, ang paglihok sa usa nga wala ang lain nagpasabut nga hunahunaon pag-usab ang tibuuk nga API. Apan kung mahimo nimo kini, wala’y ma-debug. Ang problema wala lang. Unsa ang Modernong CSS nga Wala Gihapon Masulbad Ang CSS dugay na nga naabot dinhi, apan adunay mga lugar nga makapaluya kanimo. Ang posisyon: naayo ug pagbag-o nga mga isyu anaa gihapon. Naa kini sa spec nga tinuyo, nga nagpasabut nga wala’y CSS workaround nga naglungtad. Kung naggamit ka usa ka librarya sa animation nga nagputos sa imong layout sa usa ka nabag-o nga elemento, mobalik ka sa kinahanglan nga mga portal o posisyon sa angkla. Ang CSS Anchor Positioning nagsaad, apan bag-o. Sama sa nahisgotan na, ang Firefox nagkinahanglan gihapon og polyfill sa panahon nga gisulat ko kini. Naigo ko ang mga kaso sa sulud sa layout nga nanginahanglan mga fallback nga wala nako damha. Kung kinahanglan nimo ang makanunayon nga pamatasan sa tanan nga mga browser karon, nakab-ot gihapon nimo ang JavaScript alang sa malisud nga mga bahin. Ang dugang nga aktuwal nakong giusab ang akong workflow mao ang HTML Popover API, nga anaa na karon sa tanang modernong browser. Ang mga elemento nga adunay attribute nga popover render sa ibabaw nga layer sa browser, labaw sa tanan, nga walay JavaScript positioning gikinahanglan.
Ang pagdumala sa pag-eskapo, pag-dismiss-on-click-outside, ug solidong accessibility semantics libre alang sa mga butang sama sa tooltips, disclosure widgets, ug simple nga mga overlay. Kini ang una nga himan nga akong naabut karon. Ingon niana, dili kini makasulbad sa positioning. Gisulbad niini ang layering. Kinahanglan pa nimo ang anchor positioning o JavaScript aron ipahiangay ang usa ka popover sa gatilyo niini. Ang Popover API nagdumala sa layering. Ang anchor positioning nagdumala sa pagbutang. Gigamit nga magkauban, gisakup nila ang kadaghanan sa kung unsa ang gusto nimo kaniadto nga buhaton sa usa ka librarya. Usa ka Giya sa Desisyon Para sa Imong Sitwasyon Human sa pag-agi niining tanan sa lisud nga paagi, ania kung giunsa nako paghunahuna ang bahin sa pagpili karon.
Gamit ug portal. Gamiton nako kini kung ang gatilyo mupuyo sa lawom nga mga sudlanan sa scroll. Gigamit nako kini nga sumbanan alang sa mga menu sa aksyon sa lamesa ug gipares kini sa pagpahiuli sa focus ug mga pagsusi sa pagka-access. Kini ang labing kasaligan nga kapilian, apan oras sa badyet alang sa dugang nga mga kable. Gamita ang fixed positioning.Kini para kung naa ka sa vanilla JavaScript o usa ka gaan nga framework ug mapamatud-an nga walay katigulangan nga magamit ang mga pagbag-o o mga pagsala. Sayon ra ang pag-set up ug yano nga i-debug, basta adunay usa nga pagpugong. Gamita ang CSS Anchor Positioning.Abota kini kung gitugotan kini sa imong browser nga suporta. Kung gikinahanglan ang suporta sa Firefox, ipares kini sa @oddbird polyfill. Dinhi diin ang plataporma sa katapusan nagpadulong ug sa kadugayan mahimo nga imong kinahanglan nga pamaagi. Istruktura pag-usab ang DOM. Gamita kini kung gitugotan kini sa arkitektura, ug gusto nimo ang pagkakomplikado sa zero runtime. Nagtuo ko nga kini lagmit ang labing ubos nga kapilian. Paghiusa sa mga pattern. Buhata kini kung gusto nimo ang pagpoposisyon sa angkla ingon imong panguna nga pamaagi, gipares sa usa ka fallback sa JavaScript alang sa dili suportadong mga browser. O usa ka portal alang sa pagbutang sa DOM nga gipares sa getBoundingClientRect() alang sa katukma sa koordinasyon.
Panapos Kaniadto akong gitagad kini nga bug ingon usa ka us aka us aka isyu - usa ka butang nga i-patch ug ipadayon. Apan sa dihang naglingkod ako uban niini igo nga igo aron masabtan ang tanan nga tulo ka mga sistema nga nalangkit - pag-overflow clipping, pag-stack sa mga konteksto, ug adunay mga bloke - kini mihunong sa pagbati nga random. Makatan-aw ko sa naguba nga dropdown ug masubay dayon kon kinsa nga katigulangan ang responsable. Kana nga pagbalhin sa kung giunsa nako pagbasa ang DOM mao ang tinuud nga pagkuha. Walay usa ka husto nga tubag. Ang akong naabot nagdepende sa akong makontrol sa codebase: mga portal sa dihang ang punoan sa katigulangan dili matag-an; fixed positioning kon kini limpyo ug yano; pagpalihok sa elemento sa dihang walay makapugong kanako; ug anchor positioning karon,asa nako mahimo. Bisan unsa ang imong pilion, ayaw isipa ang pagka-access isip katapusang lakang. Sa akong kasinatian, mao gyud kana kung kini malaktawan. Ang mga relasyon sa ARIA, ang pagdumala sa pokus, ang pamatasan sa keyboard - dili kana polish. Bahin sila sa kung unsa ang naghimo sa butang nga molihok. Tan-awa ang tibuok source code sa akong GitHub repo. Dugang nga Pagbasa Kini ang mga pakisayran nga kanunay nakong gibalik samtang nagtrabaho niini:
Ang Stacking Context (MDN) "CSS Anchor Positioning Guide", Juan Diego Rodriguez "Pagsugod Sa Popover API", Godstime Aburu Naglutaw nga UI (floating-ui.com) CSS Overflow (MDN)
