Awọn ohn jẹ fere nigbagbogbo kanna, eyi ti o jẹ a data tabili inu kan scrollable eiyan. Gbogbo awọn ila ni akojọ aṣayan iṣẹ kan, sisọ silẹ kekere kan pẹlu awọn aṣayan diẹ, bii Ṣatunkọ, Duplicate, ati Parẹ. O kọ ọ, o dabi pe o ṣiṣẹ ni pipe ni ipinya, lẹhinna ẹnikan fi sii sinu div ti o yi lọ ati pe awọn nkan ṣubu. Mo ti rii kokoro gangan yii ni awọn ipilẹ koodu oriṣiriṣi mẹta: eiyan, akopọ, ati ilana, gbogbo yatọ. Kokoro naa, botilẹjẹpe, jẹ aami kanna. Isalẹ silẹ yoo ge ni eti eiyan naa. Tabi o ṣe afihan lẹhin akoonu ti o yẹ ki o logbon wa labẹ rẹ. Tabi o ṣiṣẹ daradara titi ti olumulo yoo yi lọ, ati lẹhinna o lọ. O de ọdọ z-index: 9999. Nigba miiran o ṣe iranlọwọ, ṣugbọn awọn igba miiran ko ṣe nkankan rara. Aiṣedeede yẹn jẹ itọkasi akọkọ pe nkan ti o jinle n ṣẹlẹ. Idi ti o fi n pada wa ni pe awọn ọna ẹrọ aṣawakiri lọtọ mẹta ni o ni ipa, ati pe ọpọlọpọ awọn olupilẹṣẹ loye ọkọọkan funrarẹ ṣugbọn ko ronu nipa ohun ti o ṣẹlẹ nigbati gbogbo awọn mẹtẹẹta ba kọlu: aponsedanu, awọn ipo akopọ, ati awọn bulọọki ti o ni ninu.
Ni kete ti o loye bii gbogbo awọn mẹtẹẹta ṣe nlo, awọn ipo ikuna da rilara laileto duro. Ni otitọ, wọn di asọtẹlẹ. Awọn nkan mẹta ti o fa Eyi ni otitọ Jẹ ki a wo ọkọọkan awọn nkan wọnyi ni awọn alaye. Aponsedanu Isoro Nigbati o ba ṣeto aponsedanu: farasin, aponsedanu: yi lọ, tabi aponsedanu: adaṣe lori eroja kan, ẹrọ aṣawakiri yoo ge ohunkohun ti o fa kọja awọn aala rẹ, pẹlu awọn ọmọ ti o wa ni ipo pipe. .agbelepo-epo { àkúnwọsílẹ: auto; iga: 300px; /* Eyi yoo ge idinku silẹ, iduro ni kikun */ }
.silẹ { ipo: idi; /* Ko ṣe pataki -- ṣi gige nipasẹ .ṣilọ-epo */ }
Ìyẹn yà mí lẹ́nu nígbà àkọ́kọ́ tí mo sáré wọ inú rẹ̀. Emi yoo gba ipo: pipe yoo jẹ ki ohun elo kan sa fun gige gige kan. Ko ṣe bẹ. Ni iṣe, iyẹn tumọ si pe akojọ aṣayan ti o wa ni ipo patapata le ge kuro nipasẹ baba eyikeyi ti o ni iye aponsedanu ti ko han, paapaa ti baba naa kii ṣe bulọọki akojọ aṣayan. Agekuru ati ipo jẹ awọn ọna ṣiṣe lọtọ. Wọn kan ṣẹlẹ lati kọlu ni awọn ọna ti o wo laileto patapata titi iwọ o fi loye mejeeji.
Eyi ni apẹẹrẹ React nipa lilo createPortal:
gbe wọle {creat Portal} lati 'react-dom'; gbe wọle {useState, useEffect, useRef} lati 'fesi';
Sisọ silẹ iṣẹ ({anchorRef, isOpen, children }) { const [ipo, setPosition] = useState ({oke: 0, osi: 0});
useEffect(() => { ti (isOpen && anchorRef.current) { const rect = anchorRef.current.getBoundingClientRect (); Ipo ṣeto ({ oke: rect.bottom + window.scrollY, osi: rect.left + window.scrollX, }); } }, [isOpen, anchorRef]);
ti o ba ti (! isOpen) pada asan;
pada createPortal(
Ati pe, dajudaju, a ko le foju iraye si. Awọn eroja ti o wa titi ti o han lori akoonu gbọdọ jẹ eyiti o le de ọdọ keyboard. Ti aṣẹ idojukọ ko ba lọ nipa ti ara sinu sisọ silẹ ti o wa titi, iwọ yoo nilo lati ṣakoso rẹ nipa lilo koodu. O tun tọ lati ṣayẹwo pe ko joko lori akoonu ibaraenisepo miiran laisi ọna lati yọ kuro. Iyẹn jẹ ọ ni idanwo keyboard. Ipo Anchor CSS: Nibo ni Mo ro pe Eyi nlọ Ipo Anchor CSS jẹ itọsọna ti Mo nifẹ julọ ni bayi. Emi ko ni idaniloju iye ti alaye naa jẹ ohun elo gidi nigbati mo kọkọ wo rẹ. O jẹ ki o sọ ibatan laarin sisọ silẹ ati okunfa rẹ taara ni CSS, ati ẹrọ aṣawakiri n ṣakoso awọn ipoidojuko. .nfa { oran-orukọ: --mi-nfa; }
.akojọ-silẹ-silẹ { ipo: idi; ipo-oran: --mi-nfa; oke: oran (isalẹ); osi: oran (osi); ipo-gbiyanju-fallbacks: isipade-block, isipade-inline; }
Ohun-ini ipo-gbiyanju-fallbacks jẹ ohun ti o jẹ ki eyi tọsi lilo lori iṣiro afọwọṣe kan. Ẹrọ aṣawakiri naa n gbiyanju awọn aye miiran ṣaaju fifun silẹ, nitorinaa sisọ silẹ ni isalẹ ti wiwo wiwo yoo yipada laifọwọyi si oke dipo ki o ge kuro. Atilẹyin aṣawakiri jẹ ri to ni awọn aṣawakiri orisun Chromium ati dagba ni Safari. Firefox nilo polyfill. package @oddbird/css-anchor-positioning package ni wiwa ni pato pato. Mo ti lu awọn ọran eti akọkọ pẹlu rẹ ti o nilo awọn ifẹhinti Emi ko nireti, nitorinaa tọju rẹ bi imudara ilọsiwaju tabi so pọ pẹluJavaScript fallback fun Firefox. Ni kukuru, ni ileri ṣugbọn kii ṣe gbogbo agbaye sibẹsibẹ. Ṣe idanwo ninu awọn aṣawakiri ibi-afẹde rẹ. Ati niwọn igba ti iraye si, sisọ ibatan wiwo ni CSS ko sọ fun igi iraye si ohunkohun. aria-controls, Aria-expanded, aria-haspopup - ti apakan jẹ ṣi lori o. Nigba miiran Atunṣe naa Nlọ Nkan naa Ṣaaju ki o to de ọna abawọle kan tabi ṣiṣe awọn iṣiro ipoidojuko, Mo nigbagbogbo beere ibeere kan ni akọkọ: Njẹ sisọ silẹ yii nilo lati gbe inu eiyan iwe-kika naa gangan bi? Ti ko ba ṣe bẹ, gbigbe isamisi si ipari ipele ti o ga julọ yọkuro iṣoro naa patapata, laisi JavaScript ati ko si awọn iṣiro ipoidojuko. Eyi ko ṣee ṣe nigbagbogbo. Ti o ba jẹ pe bọtini ati sisọ silẹ ti wa ni idalẹnu ni paati kanna, gbigbe ọkan laisi awọn ọna miiran lati tunro gbogbo API. Ṣugbọn nigbati o ba le ṣe, ko si nkankan lati ṣatunṣe. Iṣoro naa ko si tẹlẹ. Kini CSS ode oni ko tun yanju CSS ti wa ọna pipẹ nibi, ṣugbọn awọn aaye tun wa ti o jẹ ki o sọkalẹ. Ipo naa: awọn ọran ti o wa titi ati iyipada tun wa nibẹ. O wa ni pato ni imomose, eyiti o tumọ si pe ko si iṣẹ iṣẹ CSS wa. Ti o ba nlo ile-ikawe ere idaraya ti o fi ipari si ipilẹ rẹ ni nkan ti o yipada, o ti pada si nilo awọn ọna abawọle tabi ipo iduro. Ipo ipo oran CSS jẹ ileri, ṣugbọn tuntun. Gẹgẹbi a ti sọ tẹlẹ, Firefox tun nilo polyfill ni akoko ti MO nkọ eyi. Mo ti lu awọn ọran eti akọkọ pẹlu rẹ ti o nilo awọn ifẹhinti Emi ko nireti. Ti o ba nilo ihuwasi deede lori gbogbo awọn aṣawakiri loni, o tun n de JavaScript fun awọn ẹya ti o ni ẹtan. Afikun ti Mo ti yi iṣiṣẹ-iṣẹ mi pada fun ni HTML Popover API, bayi wa ni gbogbo awọn aṣawakiri ode oni. Awọn eroja pẹlu abuda popover ṣe afihan ni Layer oke ti aṣawakiri, ju ohun gbogbo lọ, laisi ipo JavaScript ti nilo.
Imudani abayo, ifasilẹ-ni-tẹ-ita, ati awọn imọ-itumọ iraye si wa ni ọfẹ fun awọn nkan bii awọn itọsona irinṣẹ, awọn ẹrọ ailorukọ ifihan, ati awọn agbekọja ti o rọrun. O jẹ irinṣẹ akọkọ ti Mo de fun bayi. Iyẹn ti sọ, ko yanju ipo. O yanju layering. O tun nilo ipo oran tabi JavaScript lati ṣe afiwe agbejade kan si okunfa rẹ. Agbejade API n kapa awọn layering. Ipo oran kapa awọn placement. Ti a lo papọ, wọn bo pupọ julọ ohun ti o fẹ tẹlẹ de ọdọ ile-ikawe kan lati ṣe. Itọsọna Ipinnu Fun Ipo Rẹ Lẹhin ti o lọ nipasẹ gbogbo eyi ni ọna lile, eyi ni bii Mo ṣe ronu gangan nipa yiyan ni bayi.
Lo ọna abawọle kan. Emi yoo lo eyi nigbati okunfa ba n gbe jinle ninu awọn apoti iwe itẹle. Mo lo apẹrẹ yii fun awọn akojọ aṣayan iṣẹ tabili ati so pọ pẹlu imupadabọ idojukọ ati awọn sọwedowo iraye si. O jẹ aṣayan ti o gbẹkẹle julọ, ṣugbọn akoko isuna fun afikun onirin. Lo ipo ti o wa titi.Eyi jẹ fun nigba ti o wa ni fanila JavaScript tabi ilana iwuwo fẹẹrẹ ati pe ko le rii daju pe ko si baba ti o kan awọn iyipada tabi awọn asẹ. O rọrun lati ṣeto ati rọrun lati yokokoro, niwọn igba ti idinamọ kan wa. Lo CSS Anchor Positioning.De fun eyi nigbati atilẹyin ẹrọ aṣawakiri rẹ ba gba laaye. Ti o ba nilo atilẹyin Firefox, so pọ mọ @oddbird polyfill. Eyi ni ibiti pẹpẹ ti nlọ nikẹhin ati pe yoo bajẹ di lilọ-si ọna rẹ. Ṣe atunto DOM.Lo eyi nigbati faaji ba gba laaye, ati pe o fẹ idiju asiko asiko odo. Mo gbagbọ pe o ṣee ṣe aṣayan aibikita julọ. Darapọ awọn ilana. Ṣe eyi nigbati o ba fẹ ipo oran bi ọna akọkọ rẹ, so pọ pẹlu javaScript fallback fun awọn aṣawakiri ti ko ni atilẹyin. Tabi ọna abawọle kan fun ipo DOM ti a so pọ pẹlu getBoundingClientRect () fun deede ipoidojuko.
Ipari Mo ti lo lati toju kokoro yi bi a ọkan-pipa oran - nkankan lati alemo ati ki o gbe lori lati. Ṣugbọn ni kete ti Mo joko pẹlu rẹ gun to lati loye gbogbo awọn ọna ṣiṣe mẹta ti o kan - gige ti iṣan omi, awọn aaye akopọ, ati awọn bulọọki ti o ni ninu - o dẹkun rilara laileto. Mo le wo isọ silẹ ti o bajẹ ati lẹsẹkẹsẹ wa iru baba ti o ni iduro. Iyipada yẹn ni bii MO ṣe ka DOM ni gbigba gidi. Ko si idahun ọtun kan. Ohun ti mo de da lori ohun ti Mo le ṣakoso ni codebase: awọn ọna abawọle nigbati igi baba jẹ airotẹlẹ; ipo ti o wa titi nigbati o mọ ati rọrun; gbigbe awọn ano nigbati ohunkohun ti a idekun mi; ati ipo oran ni bayi,ibi ti mo ti le. Ohunkohun ti o pari ni yiyan, maṣe tọju iraye si bi igbesẹ ti o kẹhin. Ninu iriri mi, iyẹn ni deede nigba ti o fo. Awọn ibatan ARIA, iṣakoso idojukọ, ihuwasi keyboard - iyẹn kii ṣe didan. Wọn jẹ apakan ti ohun ti o jẹ ki nkan naa ṣiṣẹ gangan. Ṣayẹwo koodu orisun ni kikun ni GitHub repo mi. Siwaju kika Iwọnyi ni awọn itọkasi ti Mo tẹsiwaju lati pada si lakoko ti n ṣiṣẹ nipasẹ eyi:
Ọrọ Iṣakojọpọ (MDN) "CSS Oran Ipo Itọsọna", Juan Diego Rodriguez "Bibẹrẹ Pẹlu Agbejade API", Godstime Aburu UI lilefoofo (floating-ui.com) Àkúnwọ́sílẹ̀ CSS (MDN)
