'Oku meimei tatau ma'u pe 'a e scenario, 'a ia ko ha tepile fakamatala 'i loto 'i ha koniteina scrollable. Ko e laine kotoa pe 'oku 'i ai ha menu ngaue, ha ki'i dropdown mo e ngaahi fili 'e ni'ihi, hange ko e Fakatonutonu, Fakatatau, mo e Tamate'i. 'Oku ke langa ia, 'oku hange 'oku ngaue haohaoa 'i he nofo mavahe, pea 'oku 'ai leva ia 'e ha taha 'i loto 'i he div scrollable ko ia pea 'oku to 'a e ngaahi me'a. Kuo u sio ki he bug pau ko ‘eni ‘i he codebases kehekehe ‘e tolu: ‘a e koniteina, ‘a e stack, mo e framework, ‘oku kehekehe kotoa. Kae kehe, ko e bug ‘oku tatau faka‘aufuli. ‘Oku ma’u ‘e he dropdown ‘a e clipped ‘i he tafa’aki ‘o e koniteina. Pe 'oku ne fakahaa'i mai 'i mui 'i he kakano 'oku totonu ke fakalokiloki 'i lalo ai. Pe 'oku ngaue lelei ia kae 'oua kuo scroll 'a e tokotaha 'oku ne ngaue'aki, pea toki drifts. 'Oku ke a'u ki he z-index: 9999. Taimi 'e ni'ihi 'oku tokoni, ka 'i he taimi kehe 'oku 'ikai 'aupito ke ne fai ha me'a. Ko e taʻefeʻunga ko iá ko e ʻuluaki fakaʻilonga ia ʻoku hoko ha meʻa loloto ange. Ko e 'uhinga 'oku ne kei foki mai ai ko e 'oku kau 'a e ngaahi sisitemi browser kehekehe 'e tolu, pea 'oku mahino ki he tokolahi taha 'o e kau developers 'a e taha takitaha 'iate ia pe ka 'oku 'ikai ke nau teitei fakakaukau ki he me'a 'oku hoko 'i he taimi 'oku fepaki kotoa ai 'a e tolu: 'overflow, stacking contexts, mo e 'i ai 'a e ngaahi poloka.
Ko e taimi pe 'oku mahino ai kiate koe 'a e founga 'oku fetu'utaki ai 'a e tolu kotoa pe, 'oku ta'ofi 'e he ngaahi founga 'o e ta'elavame'a 'a e ongo'i random. Ko hono mo‘oní, ‘oku nau hoko ‘o lava ke tomu‘a tala. Ko e Me‘a ‘e Tolu ‘Oku Nau Fakatupu Mo‘oni Eni . Tau vakai fakaikiiki angé ki he ngaahi me‘a taki taha ko iá. Ko e Palopalema ‘o e Overflow . 'I he taimi 'oku ke seti ai 'a e 'overflow: fufuu'i, 'overflow: takai, pe 'overflow: 'otometiki 'i ha 'elemeniti, 'e clip 'e he browser ha me'a pe 'oku fakalahi atu 'i hono ngaahi ngata'anga, kau ai 'a e hako 'oku tu'u 'aupito. .takai-koniteina { 'over: 'otometiki; maʻolunga: 300px; /* 'E clip 'e he me'a ni 'a e dropdown, tu'u kakato */ }
.hifo { tuʻunga: fakaʻaufuli; /* 'Oku 'ikai ke mahu'inga -- kei clipped 'e he .scroll-koniteina */ }
Naʻe fakaʻohovaleʻi au ʻe he meʻa ko iá ʻi he fuofua taimi ne u lele atu ai ki aí. Na’a ku ma’u ‘a e tu’unga: ‘e tuku ‘e he absolute ha ‘elemeniti ke hola mei ha clipping ‘o ha koniteina. ‘Oku ‘ikai. ‘I he ngaue, ‘oku ‘uhinga ia ‘e lava ke motuhi ha menu ‘oku tu’u ‘aupito ‘e ha kui ‘oku ‘i ai ha mahu’inga ‘o e overflow ‘oku ‘ikai ke hā, neongo kapau ‘oku ‘ikai ko e kui ko ia ‘a e poloka ‘oku ‘i ai ‘a e menu. Ko e clip mo e tu'unga ko e ongo sisitemi kehekehe. ʻOku hoko pē ʻo na fepaki ʻi ha ngaahi founga ʻoku hā ngali fakatuʻupakē kakato kae ʻoua kuo mahino fakatouʻosi kiate koe.
Ko e fakatātā ‘eni ‘o e React ‘o faka’aonga’i ‘a e createPortal:
'omi { fa'u 'a e Portal } mei he 'tali-dom'; import { faka'aonga'iState, faka'aonga'iEffect, faka'aonga'iRef } mei he 'tali';
ngaue Dropdown ({ taulaRef, 'oku Fakaava, fanau }) { const [tu'unga, setTu'unga] = faka'aonga'i 'a eState ({ 'olunga: 0, to'ohema: 0 });
faka'aonga'i 'a e ola (() => { kapau ('oku Fakaava && taulaRef.lolotonga) { const rect = taulaRef.lolotonga.ma'u 'a e Fakangatangata 'o e KalaieniRect (); setTu'unga ({ 'olunga: rect.lalo + matapa sio'ata.takaiY, to'ohema: rect.to'ohema + matapa sio'ata.takaiX, }); } }, ['oku Fakaava, taulaRef]);
kapau (!isOpen) fakafoki mai 'a e null;
fakafoki mai 'a e fa'u 'o e Portal (
Pea, ko e mo’oni, ‘oku ‘ikai ke tau lava ‘o tukunoa’i ‘a e accessibility. Ko e ngaahi 'elemeniti tu'u ma'u 'oku 'asi 'i he funga 'o e kakano kuo pau ke kei lava ke a'u ki ai 'a e keyboard. Kapau ‘oku ‘ikai ke fakanatula ‘a e nga’unu ‘a e tu’utu’uni ‘o e tokanga ki he dropdown tu’u ma’u, ‘e fie ma’u ke ke pule’i ia ‘o faka’aonga’i ‘a e code. ‘Oku taau foki ke vakai’i ‘oku ‘ikai ke ne tangutu ‘i he ngaahi me’a kehe ‘oku fetu’utaki ‘o ‘ikai ha founga ke faka’ikai’i ai. Ko e taha ko ia 'oku ne u'u koe 'i he sivi keyboard. CSS Taula Positioning: Ko e feitu'u 'oku ou fakakaukau 'oku 'alu ki ai 'eni Ko e CSS Anchor Positioning ko e tafa’aki ia ‘oku ou mahu’inga’ia taha ai he taimi ni. Na’e ‘ikai keu fakapapau’i pe ko e ha e lahi ‘o e spec na’e lava ke ngaue’aki mo’oni ‘i he’eku fuofua sio ki ai. 'Oku ne faka'ata koe ke ke fakaha 'a e fekau'aki 'i he vaha'a 'o ha dropdown mo hono trigger fakahangatonu 'i he CSS, pea 'oku tokanga'i 'e he browser 'a e ngaahi fakafekau'aki. .fakatupu { taula-hingoa: --ko 'eku-fakatupu; }
.menu-hifo { tuʻunga: fakaʻaufuli; tu'unga-taula: --'eku-fakatupu; 'olunga: taula(lalo); toʻohema: taula(toʻohema); tu'unga-feinga-fallbacks: flip-poloka, flip-'i he laine; }
Ko e koloa 'o e tu'unga-feinga-fallbacks ko e me'a ia 'oku ne 'ai 'eni ke mahu'inga hono faka'aonga'i 'i ha fika'i tohi. 'Oku feinga 'a e browser ki he ngaahi tu'unga kehe kimu'a pea toki tukuange, ko ia 'oku 'otometiki 'a e dropdown 'i he lalo viewport 'o flips ki 'olunga kae 'ikai ke ma'u 'a e motuhi. 'Oku fefeka 'a e poupou 'a e browser 'i he ngaahi browser 'oku makatu'unga 'i he Chromium pea 'oku tupulaki 'i he Safari. 'Oku fie ma'u 'e he Firefox ha polyfill. 'Oku 'ufi'ufi 'e he @oddbird/css-taula-tu'unga 'a e kato 'a e spec tefito. Kuo u taa’i ‘a e ngaahi keisi ‘o e tafa’aki fokotu’utu’u mo ia ‘oku fie ma’u ‘a e fallbacks na’e ‘ikai ke u ‘amanaki ki ai, ko ia ke tokanga’i ia ko ha fakalelei’i fakalakalaka pe fakahoa ia mo ha .Ko e fakafoki ʻo e JavaScript ki he Firefox. Ko hono fakanounou, ʻoku talaʻofa ka ʻoku teʻeki ke fakamāmani lahi. Sivi 'i ho'o ngaahi browsers taumu'a. Pea ko e me’a ki he accessibility, ko hono fakaha ‘o ha fehokotaki’anga faka’ata ‘i he CSS ‘oku ‘ikai ke ne tala ki he ‘akau ‘o e accessibility ha me’a. aria-pule'i, aria-fakalahi, aria-haspopup — 'oku kei 'iate koe 'a e konga ko ia. Taimi 'e ni'ihi ko e Fix 'oku ne hiki pe 'a e 'elemeniti . Kimu'a pea u a'u ki ha portal pe fai ha ngaahi fakafuofua 'o e coordinate, 'Oku ou 'uluaki 'eke ma'u pe ha fehu'i 'e taha: 'Oku fie ma'u mo'oni 'e he dropdown ko 'eni ke nofo 'i loto 'i he koniteina 'o e takainga tohi? Kapau ‘oku ‘ikai, ko hono hiki ‘o e faka‘ilonga ki ha takai ‘oku tu‘unga mā‘olunga angé ‘okú ne fakangata faka‘aufuli ‘a e palopalemá, ‘o ‘ikai ha JavaScript pea ‘ikai ha ngaahi fakafuofua fakafekau‘aki. ‘Oku ‘ikai ke malava ma’u pe ‘eni. Kapau 'oku encapsulated 'a e button mo e dropdown 'i he konga tatau, hiki 'a e taha 'o 'ikai ha taha 'oku 'uhinga ia ke toe fakakaukau'i 'a e API kotoa. Ka ‘i he taimi ‘oku ke lava ai ‘o fai, ‘oku ‘ikai ha me’a ke debug. Ko e palopalema ‘oku ‘ikai pe ke ‘i ai. Ko e Me’a ‘oku Kei ‘Ikai Ke Solova ‘e he CSS Fakaonopooni Kuo ha'u 'a e CSS 'i ha hala lōloa heni, ka 'oku kei 'i ai pe 'a e ngaahi feitu'u 'oku ne tukuange koe. Ko e tu'unga: 'oku kei 'i ai pe 'a e ngaahi issue fixed mo transform. ‘Oku ‘i he spec fakataumu’a, ‘a ia ‘oku ‘uhinga ia ‘oku ‘ikai ha CSS workaround ‘oku ‘i ai. Kapau ‘oku ke faka’aonga’i ha laipeli ‘o e ngaahi faka’ata ‘oku ne takai’i ho’o fokotu’utu’u ‘i ha ‘elemeniti kuo liliu, ‘oku ke foki ki he fie ma’u ‘o e ngaahi portals pe tu’unga taula. 'Oku tala'ofa 'a e CSS Taula 'o e Tu'unga, ka 'oku fo'ou. Hange ko ia na’e lave ki ai kimu’a, ‘oku kei fiema’u pe ‘e he Firefox ha polyfill ‘i he taimi ‘oku ou tohi ai ‘eni. Kuo u taa’i ‘a e ngaahi keisi ‘o e tafa’aki fokotu’utu’u mo ia ‘oku fie ma’u ‘a e fallbacks na’e ‘ikai ke u ‘amanaki ki ai. Kapau ‘oku ke fie ma’u ‘a e ‘ulungaanga tu’uma’u ‘i he ngaahi browser kotoa pe ‘i he ‘aho ni, ‘oku ke kei a’u atu ki he JavaScript ki he ngaahi konga tricky. Ko e tanaki atu kuo u liliu mo’oni ‘eku workflow ki he HTML Popover API, ‘oku ma’u he taimi ni ‘i he ngaahi browsers fakaonopooni kotoa pe. Ko e ngaahi ‘elemeniti ‘oku ‘i ai ‘a e ‘ulungaanga popover ‘oku nau ‘omai ‘i he la’i ‘olunga ‘o e browser, ‘i ‘olunga ‘i he me’a kotoa pe, ‘o ‘ikai ha tu’unga JavaScript ‘oku fie ma’u.
Fakaava
Hola 'a e tokanga'i, faka'ata-'i he-kiliki-tu'a, mo e semantics 'o e accessibility fefeka 'oku ha'u ta'etotongi ki he ngaahi me'a hange ko e ngaahi me'angaue, ngaahi widgets fakahaa'i, mo e ngaahi 'overlays faingofua. Ko e ‘uluaki me’angaue ia ‘oku ou a’u ki ai he taimi ni. Ko e pehē, ‘oku ‘ikai ke ne solova ‘a e tu’unga. ʻOkú ne solova ʻa e layer. 'Oku ke kei fie ma'u 'a e tu'unga 'o e taula pe JavaScript ke fakafe'unga'i ha popover ki hono trigger. 'Oku tokanga'i 'e he Popover API 'a e la'i. ʻOku tokangaʻi ʻe he tuʻunga ʻo e taulá ʻa e tuʻuʻangá. ‘I hono ngāue‘aki fakataha, ‘oku nau ‘ufi‘ufi ‘a e konga lahi ‘o e me‘a na‘á ke a‘u ki ai ki mu‘a ki ha laipeli ke fai. Ko ha Fakahinohino ki he Tuʻutuʻuní Ki Ho Tuʻungá . Hili ‘eku fou ‘i he founga faingata’a kotoa ko ‘eni, ko e founga ‘eni ‘oku ou fakakaukau mo’oni ai ki he fili he taimi ni.
Faka’aonga’i ha portal.I’d faka’aonga’i ‘eni ‘i he taimi ‘oku nofo loloto ai ‘a e trigger ‘i he ngaahi koniteina takainga tohi nested. Na'a ku faka'aonga'i 'a e sipinga ko 'eni ki he ngaahi menu ngaue 'o e tepile pea fakahoa ia mo e fakafoki 'o e tokanga mo e ngaahi sivi 'o e accessibility. Ko e fili falala’anga taha ia, ka ko e taimi patiseti ki he ngaahi uaea ‘oku toe lahi ange. Faka’aonga’i ‘a e tu’unga tu’u ma’u.Ko ‘eni ki he taimi ‘oku ke ‘i he vanilla JavaScript pe ko ha fa’unga ma’ama’a pea ‘e lava ke fakamo’oni’i ‘oku ‘ikai ha kui ‘oku ne faka’aonga’i ‘a e ngaahi liliu pe ngaahi filita. ‘Oku faingofua ke fokotu’u pea faingofua ke debug, ‘o kapau ‘oku pukepuke ‘e he fakangatangata ‘e taha ko ia. Faka'aonga'i 'a e CSS Taula Positioning.A'u ki he me'a ni 'i he taimi 'oku faka'ata ai 'e ho'o poupou browser. Kapau 'oku fie ma'u 'a e poupou 'a e Firefox, fakahoa ia mo e polyfill @oddbird. Ko e feitu'u 'eni 'oku iku 'o 'alu ki ai 'a e peletifoomu pea 'e faifai pea hoko ia ko ho'o founga 'alu-ki-he. Toe fokotu'utu'u 'a e DOM.Use 'eni 'i he taimi 'oku fakangofua ai 'e he 'atakai, pea 'oku ke fie ma'u 'a e zero runtime faingata'a. ‘Oku ou tui ‘oku ngalingali ko e fili ia ‘oku underrated taha. Fakataha'i 'a e ngaahi sipinga.Fai 'eni 'i he taimi 'oku ke fie ma'u ai 'a e tu'unga 'o e taula ko ho'o founga tefito, fakahoa mo ha fallback JavaScript ki he ngaahi browsers 'oku 'ikai poupou'i. Pe ko ha matapa ki he tu'u'anga DOM 'oku fakahoa mo e getBoundingClientRect () ki he tonu 'o e fakafekau'aki.
Faka'osi . Na'a ku fa'a tokanga'i 'a e bug ko 'eni ko ha issue 'e taha — ko ha me'a ke patch mo hoko atu mei ai. Ka ko e taimi pē naʻá ku tangutu ai mo ia ʻi ha taimi lōloa feʻunga ke mahino kiate au ʻa e ngaahi sisitemi kotoa ʻe tolu ʻoku kau ki aí — ʻoverflow clipping, stacking contexts, mo e ʻi ai ha ngaahi poloka — naʻe ʻikai ke toe ongoʻi fakatuʻupakē. Te u lava ʻo sio ki ha dropdown kuo motuʻa pea ʻiloʻi leva pe ko e kui fē naʻá ne fai iá. Ko e liliu ko ia 'i he founga na'a ku lau ai 'a e DOM ko e takeaway mo'oni ia. ‘Oku ‘ikai ha tali totonu ‘e taha. Ko e meʻa naʻá ku aʻu ki aí naʻe makatuʻunga ia ʻi he meʻa te u lava ʻo puleʻi ʻi he codebase: portals ʻi he taimi naʻe ʻikai lava ke tomuʻa tala ai ʻa e ʻakau ʻo e kuí; tuʻunga tuʻu maʻu ʻi he taimi naʻe maʻa mo faingofuá; ko hono hiki ʻo e ʻelemēnití ʻi he taimi naʻe ʻikai ha meʻa ʻe taʻofi aú; mo e tu'unga taula he taimi ni, .ʻi he feituʻu te u lavá. Ko e hā pē ha me’a te ke iku fili ki ai, ‘oua ‘e lau ‘a e accessibility ko e sitepu faka’osi ia. ‘I he’eku a’usia, ko e taimi tonu ia ‘oku ma’u ai ‘a e skip. Ko e ngaahi fetu’utaki ‘a e ARIA, ko e pule’i ‘o e tokanga, ko e ‘ulungaanga ‘o e keyboard — ‘oku ‘ikai ko e ngaahi me’a ko ia ‘oku fakangingila. Ko e konga kinautolu ‘o e me’a ‘oku ne ‘ai ‘a e me’a ke ngaue mo’oni. Vakai ki he ma'u'anga fakamatala kakato 'i he'eku repo GitHub. Laukonga Toe Ko e ngaahi lave ʻeni naʻá ku toutou foki mai ki ai lolotonga ʻeku ngāue ʻo fakafou ʻi he meʻá ni:
Ko e Fakakaukau ʻo e Fakatoka (MDN) “Fakahinohino ki he Tuʻunga ʻo e Taula ʻo e CSS”, Huani Tieko Lotilikesi “Kamata 'aki 'a e Popover API”, Taimi 'o e 'Otua Aburu . UI 'oku 'alu holo ('oku 'alu holo-ui.com) CSS 'oku 'alu hake (MDN)
