Senaryo hema hema her gav heman e, ku tabloyek daneyê di hundurê konteynirek pêçayî de ye. Her rêzek pêşekek çalakiyê heye, vebijarkek piçûk bi hin vebijarkan, mîna Guherandin, Duberkirin, û Jêbirin. Hûn wê ava dikin, wusa dixuye ku ew bi rengek bêkêmasî di îzolekirinê de dixebite, û dûv re kesek wê dixe hundurê wê div-ê ya pêçayî û tişt ji hev vediqetin. Min ev xeletiya tam di sê bingehên kodê yên cihêreng de dît: konteynir, stûn, û çarçove, hemî cûda. Lêbelê, xeletî bi tevahî yek e. Daxistin li qiraxa konteynerê tê qut kirin. An jî ew li pişt naveroka ku divê bi mentiqî li binê wê be xuya dike. An jî ew baş dixebite heya ku bikarhêner dişoxilîne, û dûv re ew diherike. Hûn digihîjin z-index: 9999. Carinan ew dibe alîkar, lê carinan ew bi tevahî tiştek nake. Ew nakokî nîşana yekem e ku tiştek kûrtir diqewime. Sedema ku ew vedigere ev e ku sê pergalên gerokê yên cihêreng tevlê dibin, û pir pêşdebiran her yekê bi tena serê xwe fam dikin lê qet nafikirin ka çi diqewime dema ku her sê li hev bikevin: rijandin, xêzkirina çarçowe û blokan.
Gava ku hûn fêm dikin ka her sê jî çawa bi hev re tevdigerin, modên têkçûnê hîskirina bêserûber rawestînin. Bi rastî, ew pêşdîtin dibin. Sê Tiştên Bi rastî Sedema Vê Dikin Ka em bi hûrgulî li her yek ji wan tiştan binêrin. Pirsgirêka Overflow Dema ku hûn serpêhatinê saz bikin: veşartî, zêde: bizivirin, an zêdebûn: bixweber li ser hêmanekê, gerok dê her tiştê ku ji sînorên wê derbas dibe, di nav de neviyên bêkêmasî yên pozîsyonê jî dişoxilîne. .scroll-container { overflow: auto; height: 300px; /* Ev ê dakêşana dakêşanê, tam rawestîne */ }
.dropdown { pozîsyon: mutleq; /* Ne girîng e -- hîn jî ji hêla .scroll-container ve hatî kişandin */ }
Cara yekem ku ez ketim nav wê ez şaş bûm. Min pozîsyona xwe girtibû: mutleq dê bihêle hêmanek ji qutbûna konteynerê birevin. nake. Di pratîkê de, ev tê vê wateyê ku pêşekek bêkêmasî ya bi cîh dibe ku ji hêla her bav û kalê ku xwedan nirxek zêde ya nexuya ye were qut kirin, hetta ew bavik ne bloka menuyê ye. Clipping and positioning pergalên cuda ne. Ew tenê bi awayên ku bi tevahî bêserûber xuya dikin li hev dikevin heya ku hûn herduyan jî fêm bikin.
Li vir mînakek React bi karanîna CrePortal-ê heye:
import {createPortal} ji 'react-dom'; import { useState, useEffect, useRef } ji 'react';
fonksiyona Dropdown({ anchorRef, isOpen, zarok }) { const [position, setPosition] = useState({ top: 0, çep: 0 });
useEffect(() => { heke (isOpen && anchorRef.current) { const rect = anchorRef.current.getBoundingClientRect(); setPosition({ top: rect.bottom + window.scrollY, çep: rect.left + window.scrollX, }); } }, [isOpen, anchorRef]);
heke (!isOpen) vegere null;
vegere createPortal(
Û, bê guman, em nikarin gihîştinê paşguh bikin. Hêmanên sabît ên ku li ser naverokê xuya dibin divê hîn jî bi klavyeyê bigihîjin. Ger fermana balê bi xwezayî neçe nav dakêşana sabît, hûn ê hewce bikin ku wê bi karanîna kodê birêve bibin. Di heman demê de hêja ye ku were kontrol kirin ku ew li ser naverokek din a danûstendinê rûne, bêyî ku meriv wê red bike. Ew yek di ceribandina klavyeyê de we diêşîne. CSS Anchor Positioning: Ku ez Difikirîm ku Ev Serî ye CSS Anchor Positioning rêgezek e ku ez niha herî zêde jê re eleqedar im. Gava ku min yekem car lê nihêrî, ez ne bawer bûm ka çiqas taybetmendiyê bi rastî tê bikar anîn. Ew dihêle hûn pêwendiya di navbera dakêşek û teşeya wê rasterast di CSS-ê de ragihînin, û gerok bi hevrêzan re mijûl dibe. .trigger { anchor-name: --my-trigger; }
.dropdown-menu { pozîsyon: mutleq; position-anchor: --my-trigger; jor: lenger (jêr); çep: lenger (çep); position-try-fallbacks: flip-block, flip-inline; }
Taybetmendiya pozîsyon-ceribandin-fallbacks ev e ku vê yekê hêjayî karanîna li ser hesabek destan dike. Gerok berî ku dev jê berde, cîhên alternatîf diceribîne, ji ber vê yekê daketinek li binê dîmenderê ji dêvla ku qut bibe bixweber ber bi jor ve diherike. Piştgiriya gerokê di gerokên Chromium-ê de zexm e û di Safari de mezin dibe. Firefox hewceyê polyfillek e. Pakêta @oddbird/css-anchor-positioning taybetmendiya bingehîn vedigire. Min bi wê re li dozên qeraxa sêwiranê xist ku hewcedariya paşveçûnên ku min texmîn nedikir, ji ber vê yekê wê wekî pêşkeftinek pêşkeftî binirxînin an wê bi hev re bikinPaşvegera JavaScript ji bo Firefox. Bi kurtasî, sozdar lê hîn ne gerdûnî ye. Di gerokên armanca xwe de ceribandin. Û bi qasî gihîştinê, ragihandina têkiliyek dîtbarî di CSS de tiştek ji dara gihîştinê re nabêje. aria-kontrol, aria-berfireh, aria-haspopup - ew beş hîn jî li ser we ye. Carinan Çareserkirin Tenê Hêman Diguhezîne Berî ku ez bigihîjim portalek an hesabên hevrêziyê bikim, ez her gav yekem pirsek dipirsim: Ma ev dakêşan bi rastî hewce dike ku di hundurê konteynirê de bijî? Ger wusa nebe, veguheztina nîşankirinê berbi pêçekek astek bilindtir pirsgirêkê bi tevahî, bêyî JavaScript û bê hesabên hevrêziyê ji holê radike. Ev her gav ne gengaz e. Heke bişkojk û dakêşanê di heman hêmanê de têne vegirtin, guheztina yek bêyî ya din tê vê wateyê ku tevahiya API-ê ji nû ve bifikire. Lê gava ku hûn dikarin wiya bikin, tiştek tune ku xelet bike. Pirsgirêk tenê tune. Ya ku CSS-ya nûjen hîn jî çareser nake CSS li vir rêyek dirêj çûye, lê hîn jî cîh hene ku ew we dihêle. Helwest: Pirsgirêkên rastkirin û veguherîn hîn jî li wir in. Ew bi mebest di taybetmendiyê de ye, ku tê vê wateyê ku çareyek CSS tune. Ger hûn pirtûkxaneyek anîmasyonek bikar tînin ku sêwirana we di hêmanek veguhartî de dipêçe, hûn vedigerin hewcedariya portal an pozîsyona lengerê. CSS Anchor Positioning sozdar e, lê nû ye. Wekî ku berê hate behs kirin, dema ku ez vê yekê dinivîsim Firefox hîn jî pêdivî bi polyfill heye. Min bi wê re li dozên qiraxa sêwiranê xist ku paşveçûnên ku min texmîn nedikir hewce dikir. Ger îro hûn hewceyê tevgerek domdar li seranserê hemî gerokan in, hûn hîn jî ji bo beşên dijwar digihîjin JavaScriptê. Zêdekirina ku min bi rastî ji bo xebata xwe guherandiye HTML Popover API ye, ku naha di hemî gerokên nûjen de peyda dibe. Hêmanên bi taybetmendiya popover-ê di qata jorîn a gerokê de, li jorê her tiştî, bêyî ku cîhkirina JavaScript-ê hewce bike, têne xuyang kirin.
Desthilatdariya revê, avêtina-li-klîk-li derve, û semantîka gihîştina zexm ji bo tiştên wekî serişteyên amûran, widgetên eşkerekirinê, û pêvekên hêsan belaş in. Ew amûra yekem e ku ez niha digihîjim. Wê got, ew pozîsyonê çareser nake. Ew qatbûnê çareser dike. Hûn hîn jî hewceyê pozîsyona ankerê an JavaScript-ê ne ku hûn popoverek bi tetikandina wê ve girêbidin. Popover API qat bi rê ve dibe. Pozîsyona lenger bi cîhkirinê re mijûl dibe. Bi hev re têne bikar anîn, ew piraniya tiştê ku we berê xwe gihandiye pirtûkxaneyek ku hûn bikin vedigirin. Rêberek Biryarek Ji bo Rewşa We Piştî ku ev hemî riya dijwar derbas bû, li vir ez çawa bi rastî li ser bijartinê difikirim.
Portalek bikar bînin. Ez ê vê bikar bînim dema ku tetik di nav konteynerên hêlînkirî de bijî. Min ev nimûne ji bo pêşekên çalakiya sifrê bikar anî û ew bi vegerandina balê û kontrolên gihîştinê re heval kir. Ew vebijarka herî pêbawer e, lê dema budceyê ji bo têlkirina zêde ye. Positiona sabît bikar bînin. Ev ji bo dema ku hûn di vanilla JavaScript an çarçoveyek sivik de bin û nikaribin verast bikin ku tu bav û kalek veguhertin an fîlteran bicîh nayîne. Sazkirin hêsan e û jêbirina sade ye, heya ku ew yek astengî bigire. Dema ku piştgirîya geroka we destûrê dide CSS Anchor Positioning.Reach ji bo vê yekê bikar bînin. Ger piştevaniya Firefox hewce ye, wê bi @oddbird polyfill re heval bikin. Ev cihê ku platform di dawiyê de ber bi rê ve diçe û dê di dawiyê de bibe nêzîkatiya weya çûna we. DOM-ê ji nû ve ava bikin. Dema ku mîmarî destûrê dide vê yekê bikar bînin, û hûn tevliheviya dema xebitandinê sifir dixwazin. Ez bawer dikim ku ew îhtîmala herî kêm bijarte ye. Nimûneyên tevlihev bikin. Dema ku hûn pozîsyona lengerê wekî nêzîkatiya xweya bingehîn dixwazin, ku ji bo gerokên nepiştgirkirî bi paşvekêşana JavaScriptê re were hev kirin, vê bikin. An jî portalek ji bo cîhkirina DOM-ê ku ji bo rastbûna hevrêziyê bi getBoundingClientRect () re hatî berhev kirin.
Encam Min berê vê xeletiyê wekî pirsgirêkek yekcar derman dikir - tiştek ku meriv jê veqetîne û bimeşe. Lê gava ku ez bi têra xwe dirêjî pê re rûniştim da ku ez her sê pergalên têkildar fam bikim - qutkirina zêde, berhevkirina çarçoweyan, û blokan di nav xwe de - ew hest bi bêserûberî rawestiya. Min dikaribû li dakêşek şikestî binihêrim û tavilê bişopînim ka kîjan bavik berpirsiyar bû. Ew guheztina di awayê ku min DOM-ê dixwend de kêşeya rastîn bû. Bersiva yekane rast tune. Tiştê ku ez gihîştim bi tiştê ku ez dikarim di bingehê kodê de kontrol bikim ve girêdayî bû: portalên dema ku dara bav û kalan nediyar bû; pozîsyona sabît dema ku ew paqij û sade bû; dema ku tiştek min negirt, hêmanê diherike; û pozîsyona lenger niha,ku ez dikarim. Her tiştê ku hûn di dawiyê de hilbijêrin, gihîştinê wekî gava paşîn nagirin. Di ezmûna min de, ew tam gava ku ew ji dest tê. Têkiliyên ARIA, rêveberiya balê, tevgera klavyeyê - ew ne polandî ne. Ew beşek in ku tiştê ku bi rastî kar dike. Koda çavkaniyê ya tevahî di depoya min a GitHub de binihêrin. Bêtir Xwendina Van referansên ku min di dema xebitandina vê yekê de vedigere vegere:
Çarçoveya Stacking (MDN) "Rêbera CSS Anchor Positioning", Juan Diego Rodriguez "Destpêkirina Bi Popover API", Godstime Aburu UI floating (floating-ui.com) CSS Overflow (MDN)
