Boemo bo batla bo tšoana kamehla, e leng tafole ea data ka har'a setshelo se scrollable. Mola o mong le o mong o na le lethathamo la liketso, lethathamo le lenyenyane le nang le likhetho tse ling, joalo ka Edita, Duplicate, le Delete. U e haha, e bonahala e sebetsa ka mokhoa o phethahetseng o le mong, ebe motho e mong o e kenya ka hare ho div eo e phutholohang ebe lintho li oa. Ke bone kokoanyana ena hantle ka har'a li-codebase tse tharo tse fapaneng: setshelo, stack, le moralo, kaofela li fapane. The bug, leha ho le joalo, e tšoana ka ho feletseng. Sehlahisoa se khutsufatsoa pheletsong ea setshelo. Kapa e hlaha ka morao ho litaba tse lokelang ho ba ka tlase ho eona. Kapa e sebetsa hantle ho fihlela mosebelisi a phutha, ebe e hoholeha. U fihla ho z-index: 9999. Ka linako tse ling ea thusa, empa ka linako tse ling ha e etse letho ho hang. Ho se lumellane hoo ke leseli la pele la hore ho na le ho hong ho tebileng ho etsahalang. Lebaka leo e lulang e khutla ke hore litsamaiso tse tharo tse arohaneng tsa sebatli lia ameha, 'me bahlahisi ba bangata ba utloisisa e' ngoe le e 'ngoe ka bobona empa ha ho mohla ba nahanang ka se etsahalang ha tse tharo kaofela li thulana: ho tlala, maemo a stacking, le li-blocks.
Hang ha u utloisisa hore na ka boraro ba bona ba sebelisana joang, mekhoa ea ho hlōleha e khaotsa ho ikutloa e sa sebetse. Ha e le hantle, li fetoha tse boletsoeng esale pele. Lintho tse tharo tse hlileng li bakang Sena A re hlahlobeng e ’ngoe le e ’ngoe ea lintho tseo ka botlalo. Bothata ba Phallo Ha u seta ho khaphatseha: ho patiloe, ho khaphatseha: scroll, or overflow: auto on a element, sebatli se tla pata eng kapa eng e fetang meeli ea sona, ho kenyelletsa le litloholo tse maemong a felletseng. .setshelo sa moqolo { khaphatseha: koloi; bophahamo: 300px; /* Sena se tla fokotsa ho theoha, setopo se felletseng */ }
.theoha { boemo: feletseng; /* Ha ho na taba -- e ntse e koetsoe ke .scroll-container */ }
Seo se ile sa ’makatsa lekhetlo la pele ha ke mathela ho sona. Ke ne ke nka boemo: absolute e ne e tla tlohella ntho e itseng e phonyohe sekoting sa setshelo. Ha e etse joalo. Ha e le hantle, seo se bolela hore menu e behiloeng ka ho feletseng e ka khaoloa ke moholo-holo ofe kapa ofe ea nang le boleng bo sa bonahaleng, le haeba moholo-holo eo e se menu e nang le block. Clipping le boemo ke litsamaiso tse arohaneng. Ho etsahala hore li thulane ka litsela tse shebahalang li sa tsitsa ho fihlela u li utloisisa ka bobeli.
Mona ke mohlala oa React o sebelisa createPortal:
kenya {createPortal} ho tsoa ho 'react-dom'; kenya {useState, useEffect, useRef } ho tsoa ho 'react';
mosebetsi Dropdown ({ anchorRef, isOpen, bana }) { const [boemo, setPosition] = useState({top: 0, left: 0});
useEffect(() => { haeba (isOpen && anchorRef.current) { const rect = anchorRef.current.getBoundingClientRect(); setPosition({ holimo: rect.bottom + window.scrollY, ka ho le letšehali: rect.left + window.scrollX, }); } }, [isOpen, anchorRef]);
haeba (!isOpen) khutlela null;
khutlisetsa thehaPortal(
Mme, ehlile, re ke ke ra iphapanyetsa phihlello. Lintlha tse tsitsitseng tse hlahang holim'a litaba li ntse li tlameha ho fihlelleha keyboard. Haeba taelo ea ho tsepamisa maikutlo e sa tsamaee ka mokhoa o tsitsitseng, o tla hloka ho e laola o sebelisa khoutu. Hape ho bohlokoa ho hlahloba hore na ha e lule holim'a litaba tse ling tse sebelisanang ntle le mokhoa oa ho e qhelela. Eo e u loma litekong tsa keyboard. CSS Anchor Positioning: Moo ke nahanang hore Sena se Lebile teng CSS Anchor Positioning ke tsela eo ke e ratang haholo hona joale. Ke ne ke sa tsebe hantle hore na ho ne ho ka sebelisoa bokae ha ke qala ho e sheba. E u lumella ho phatlalatsa kamano pakeng tsa dropdown le trigger ea eona ka kotloloho ho CSS, 'me sebatli se sebetsana le likhokahano. .hlakisa { ankora-lebitso: --my-trigger; }
.lenane le theoha { boemo: feletseng; boemo-ankora: --my-trigger; holimo: ankora (ka tlaase); ka ho le letšehali: ankora (ka ho le letšehali); maemo-try-fallbacks: flip-block, flip-inline; }
Thepa ea "position-try-fallbacks" ke eona e etsang hore sena se be molemo ho sebelisoa ho feta palo ea matsoho. Sebatli se leka libaka tse ling pele se tela, ka hona, marotholi a ka tlase ho sebaka sa ho shebella a ikemela holimo ho fapana le hore a khaoloe. Tšehetso ea sebatli e tiile ho libatli tse thehiloeng ho Chromium mme e ntse e hola ho Safari. Firefox e hloka polyfill. Sephutheloana sa @oddbird/css-anchor-positioning se akaretsa lintlha tsa mantlha. Ke otlile maemo a holimo ka eona a neng a hloka liphoso tseo ke neng ke sa li lebella, kahoo e nke e le ntlafatso e tsoelang pele kapa u e kopanye leJavaScript e khutlela ho Firefox. Ka bokhuts'oane, rea ts'episa empa eseng lefats'e ka bophara. Lekola libatli tseo u li batlang. Mme mabapi le phihlello e amehang, ho phatlalatsa kamano ea pono ho CSS ha e bolelle sefate sa phihlello letho. aria-controls, aria-expanded, aria-haspopup - karolo eo e ntse e le ho uena. Ka linako tse ling Tokiso e mpa e Tsamaisa Element Pele ke fihla portal kapa ho etsa lipalo tse hokahanyang, ke lula ke botsa potso e le 'ngoe pele: Na ho theoha hona ho hloka ho phela ka har'a sets'oants'o sa moqolo? Haeba e sa etse joalo, ho tsamaisa markup ho sephutheloana sa boemo bo holimo ho felisa bothata ka botlalo, ho se na JavaScript ebile ha ho na lipalo tse hokahanyang. Sena ha se khonehe kamehla. Haeba konopo le dropdown li kentsoe karolong e le 'ngoe, ho tsamaisa e' ngoe ntle le e 'ngoe ho bolela ho nahana hape ka API eohle. Empa ha o khona ho e etsa, ha ho na letho le ka lokisoang. Bothata ha bo eo feela. Seo CSS ea Sejoale-joale e sa Rarolleheng CSS e tsamaile hole mona, empa ho ntse ho na le libaka tse u theolelang fatše. Boemo: litaba tse tsitsitseng le tse fetotsoeng li ntse li le teng. E ho spec ka boomo, ho bolelang hore ha ho na CSS workaround e teng. Haeba u sebelisa laebrari ea lipopae e koahelang sebopeho sa hau ka ntho e fetotsoeng, u khutletse ho hloka li-portal kapa boemo ba ankora. CSS Anchor Positioning ea ts'episa, empa e ncha. Joalokaha ho boletsoe pejana, Firefox e ntse e hloka polyfill ka nako eo ke ngolang sena. Ke fihlile maemong a holimo ka eona a hlokang liphoso tseo ke neng ke sa li lebella. Haeba o hloka boits'oaro bo ts'oanang ho libatli tsohle kajeno, o ntse o fihlela JavaScript bakeng sa likarolo tse qhekellang. Keketso eo ke hlileng ke e fetotseng mokhoa oa ka oa ho sebetsa ke HTML Popover API, e fumanehang hona joale ho libatli tsohle tsa sejoale-joale. Lintlha tse nang le tšobotsi ea popover li fana ka karolo e kaholimo ea sebatli, ka holim'a tsohle, ntle le boemo ba JavaScript bo hlokahalang.
Escape handle, dismiss-on-on-outside, le semantics e tiileng ya phihlello di tla mahala bakeng sa dintho tse kang dithulusi, diwidget tsa tshenolo, le mekgabiso e bonolo. Ke sesebelisoa sa pele seo ke se fihlelang hona joale. Seo se boletse, ha se rarolle maemo. E rarolla layering. U ntse u hloka anchor positioning kapa JavaScript ho hokahanya popover ho eona. Popover API e sebetsana le layering. Anchor positioning e sebetsana le ho beha. Ha li sebelisoa hammoho, li koahela boholo ba seo u neng u ka se fihlela pele bakeng sa laebrari ho se etsa. Tataiso ea Qeto Bakeng sa Boemo ba Hao Kamora ho feta ho tsena tsohle ka tsela e thata, mona ke kamoo ke hlileng ke nahanang ka khetho hona joale.
Sebelisa portal.Ke tla sebelisa sena ha seqhutsu se lula botebong ba lijaneng tsa moqolo. Ke sebelisitse paterone ena bakeng sa menyetla ea liketso tsa litafole 'me ka e kopanya le ho tsepamisa maikutlo ho khutlisa le licheke tsa phihlello. Ke khetho e tšepahalang ka ho fetisisa, empa nako ea tekanyetso bakeng sa wiring e eketsehileng. Sebelisa boemo bo tsitsitseng. Sena ke sa ha o le JavaScript ea vanilla kapa moralo o bobebe 'me o ka netefatsa hore ha ho na moholo-holo ea sebelisang liphetoho kapa lihloela. Ho bonolo ho e qala ebile ho bonolo ho e lokisa, ha feela tšitiso eo e ntse e le teng. Sebelisa CSS Anchor Positioning.Fihla bakeng sa sena ha tšehetso ea sebatli sa hau e u lumella. Haeba ts'ehetso ea Firefox e hlokahala, e kopanye le @oddbird polyfill. Mona ke moo sethala se lebileng teng 'me qetellong e tla ba mokhoa oa hau oa ho atamela. Hlophisa DOM. Sebelisa sena ha moaho o u lumella, 'me u batla ho rarahana ha nako ea ho sebetsa. Ke lumela hore e kanna ea ba khetho e tlase haholo. Kopanya lipaterone.Etsa sena ha u batla boemo ba ankora e le mokhoa oa hau oa mantlha, o tsamaisanang le mokhoa oa ho khutlisa oa JavaScript bakeng sa libatli tse sa tšehetsoeng. Kapa portal bakeng sa ho beoa ha DOM e tsamaisanang le getBoundingClientRect() bakeng sa ho nepahala ha khokahano.
Qetello Ke ne ke tloaetse ho tšoara kokoanyana ena e le taba ea nako e le 'ngoe - ntho e lokelang ho lokisoa le ho fetela pele. Empa hang ha ke lutse le eona nako e telele ho lekana ho utloisisa lits'ebetso tsohle tse tharo tse amehang - ho penta ka bongata, maemo a stacking, le li-blocks - e ile ea emisa ho ikutloa e sa sebetse. Ke ne ke khona ho sheba leqhetsoana le robehileng ebe ke fumana hang-hang hore na ke moholo-holo ofe ea ikarabellang. Phetoho eo ea tsela eo ke balileng DOM ka eona e bile eona ntho ea 'nete. Ha ho karabo e le 'ngoe e nepahetseng. Seo ke ileng ka se finyella se ne se itšetlehile ka seo nka se laolang ka har'a codebase: li-portal ha sefate sa balimo se ne se sa lebelloa; boemo bo tsitsitseng ha bo hloekile ebile bo le bonolo; ho tsamaisa elemente ha ho se letho le nthibang; le boemo ba ankora hona joale,moo nka khonang. Eng kapa eng eo u qetellang u e khetha, u se ke ua nka phihlello e le mohato oa ho qetela. Boiphihlelong ba ka, ke hantle ha e tlōloa. Likamano tsa ARIA, taolo ea tsepamiso, boits'oaro ba keyboard - tseo ha li pholisitsoe. Ke karolo ea se etsang hore ntho e sebetse. Sheba khoutu e felletseng ea mohloli ho repo ea ka ea GitHub. Ho Tsoela Pele ho Bala Tsena ke litšupiso tseo ke neng ke ntse ke khutlela ho tsona ha ke ntse ke sebetsa ka sena:
The Stacking Context (MDN) "CSS Anchor Positioning Guide", Juan Diego Rodriguez "Ho Qala ka The Popover API", Godstime Aburu UI e phaphametseng (floating-ui.com) CSS Overflow (MDN)
