Mae'r senario bron bob amser yr un peth, sef tabl data y tu mewn i gynhwysydd sgroladwy. Mae gan bob rhes ddewislen weithredu, cwymplen fach gyda rhai opsiynau, fel Golygu, Dyblyg, a Dileu. Rydych chi'n ei adeiladu, mae'n ymddangos ei fod yn gweithio'n berffaith ar ei ben ei hun, ac yna mae rhywun yn ei roi y tu mewn i'r div sgroladwy hwnnw ac mae pethau'n disgyn ar wahân. Rwyf wedi gweld yr union fyg hwn mewn tair cronfa god wahanol: y cynhwysydd, y pentwr, a'r fframwaith, i gyd yn wahanol. Mae'r byg, fodd bynnag, yn hollol union yr un fath. Mae'r gwymplen yn cael ei glipio ar ymyl y cynhwysydd. Neu mae'n dangos y tu ôl i gynnwys a ddylai fod oddi tano yn rhesymegol. Neu mae'n gweithio'n iawn nes bod y defnyddiwr yn sgrolio, ac yna'n drifftio. Rydych chi'n cyrraedd ar gyfer mynegai z: 9999. Weithiau mae'n helpu, ond ar adegau eraill nid yw'n gwneud dim byd o gwbl. Yr anghysondeb hwnnw yw’r cliw cyntaf bod rhywbeth dyfnach yn digwydd. Y rheswm y mae'n dod yn ôl o hyd yw bod tair system borwr ar wahân yn gysylltiedig, ac mae'r rhan fwyaf o ddatblygwyr yn deall pob un ar ei ben ei hun ond byth yn meddwl beth sy'n digwydd pan fydd y tri yn gwrthdaro: gorlif, pentyrru cyd-destunau, a chynnwys blociau.
Unwaith y byddwch chi'n deall sut mae'r tri yn rhyngweithio, mae'r dulliau methu yn peidio â theimlo ar hap. Mewn gwirionedd, maent yn dod yn rhagweladwy. Y Tri Pheth Mewn Gwirioneddol Sy'n Achosi Hyn Gadewch i ni edrych ar bob un o'r eitemau hynny yn fanwl. Y Broblem Gorlif Pan fyddwch chi'n gosod gorlif: cudd, gorlif: sgrolio, neu orlif: auto ar elfen, bydd y porwr yn clipio unrhyw beth sy'n ymestyn y tu hwnt i'w ffiniau, gan gynnwys disgynyddion sydd wedi'u lleoli'n llwyr. .scroll-container { gorlif: auto; uchder: 300px; /* Bydd hwn yn clipio'r gwymplen, atalnod llawn */ }
. dropdown { sefyllfa: absoliwt; /* Dim ots -- dal wedi'i dorri gan .scroll-container */ }
Fe wnaeth hynny fy synnu y tro cyntaf i mi redeg i mewn iddo. Roeddwn i wedi tybio sefyllfa: byddai absoliwt yn gadael i elfen ddianc rhag clipio cynhwysydd. Nid yw'n. Yn ymarferol, mae hynny'n golygu y gall unrhyw hynafiad sydd â gwerth gorlif anweledig dorri bwydlen wedi'i lleoli'n llwyr, hyd yn oed os nad yw'r hynafiad hwnnw'n bloc cynnwys y ddewislen. Mae clipio a lleoli yn systemau ar wahân. Maen nhw'n digwydd gwrthdaro mewn ffyrdd sy'n edrych yn hollol ar hap nes eich bod chi'n deall y ddau.
Dyma enghraifft React gan ddefnyddio createPortal:
mewnforio { createPortal } o 'react-dom'; mewnforio { useState, useEffect, useRef } o 'react';
swyddogaeth Cwymp ({ anchorRef, isOpen, plant }) { const [position, setPosition] = useState({ brig: 0, chwith: 0 });
useEffect(() => { os (ynOpen && anchorRef.current) { const rect = anchorRef.current.getBoundingClientRect(); setPosition({ brig: rect.bottom + window.scrollY, chwith: rect.left + window.scrollX, }); } }, [isOpen, anchorRef]);
os (!ynAgored) dychwelwch null;
dychwelyd createPortal(
Ac, wrth gwrs, ni allwn anwybyddu hygyrchedd. Rhaid i elfennau sefydlog sy'n ymddangos dros gynnwys fod yn gyraeddadwy â'r bysellfwrdd o hyd. Os nad yw'r gorchymyn ffocws yn symud yn naturiol i'r gwymplen sefydlog, bydd angen i chi ei reoli gan ddefnyddio cod. Mae hefyd yn werth gwirio nad yw'n eistedd dros gynnwys rhyngweithiol arall heb unrhyw ffordd i'w ddiystyru. Mae hynny'n eich brathu wrth brofi bysellfwrdd. Lleoli Angor CSS: I Ble'r wyf i'n Meddwl Mae Hwn yn Bennawd CSS Anchor Poitioning yw'r cyfeiriad y mae gen i fwyaf o ddiddordeb ynddo ar hyn o bryd. Nid oeddwn yn siŵr faint o'r fanyleb oedd yn ddefnyddiadwy pan edrychais arno gyntaf. Mae'n caniatáu ichi ddatgan y berthynas rhwng cwymplen a'i sbardun yn uniongyrchol yn CSS, ac mae'r porwr yn trin y cyfesurynnau. .trigger { angor-enw: --my-trigger; }
. gwymplen { sefyllfa: absoliwt; sefyllfa-angor: --my-sbardun; brig: angor (gwaelod); chwith: angor (chwith); sefyllfaoedd-ceisio-wrth gefn: fflip-bloc, fflip-mewn-lein; }
Yr eiddo sefyllfa-ceisio-wrth gefn yw'r hyn sy'n gwneud hyn yn werth ei ddefnyddio wrth gyfrifo â llaw. Mae'r porwr yn ceisio lleoliadau amgen cyn rhoi'r gorau iddi, felly mae cwymplen ar waelod y golygfan yn troi i fyny yn awtomatig yn hytrach na chael ei dorri i ffwrdd. Mae cefnogaeth porwr yn gadarn mewn porwyr sy'n seiliedig ar Gromiwm ac yn tyfu yn Safari. Mae angen polyfill ar Firefox. Mae'r pecyn lleoli angor @oddbird/css yn ymdrin â'r fanyleb graidd. Rwyf wedi taro achosion ymyl cynllun ag ef a oedd yn gofyn am wrthdrawiadau nad oeddwn yn eu rhagweld, felly dylech ei drin fel gwelliant cynyddol neu ei baru âJavaScript wrth gefn ar gyfer Firefox. Yn fyr, yn addawol ond nid yn gyffredinol eto. Profwch yn eich porwyr targed. Ac o ran hygyrchedd, nid yw datgan perthynas weledol yn CSS yn dweud dim wrth y goeden hygyrchedd. aria-controls, aria-ehangu, aria-haspopup—mae'r rhan honno arnoch chi o hyd. Weithiau Mae'r Atgyweiriad Dim ond yn Symud Yr Elfen Cyn cyrraedd am borth neu wneud cyfrifiadau cyfesurynnau, rwyf bob amser yn gofyn un cwestiwn yn gyntaf: A oes angen i'r cwymplen hon fyw y tu mewn i'r cynhwysydd sgrolio mewn gwirionedd? Os na fydd, mae symud y marc i lapiwr lefel uwch yn dileu'r broblem yn gyfan gwbl, heb unrhyw JavaScript a dim cyfrifiadau cydlynu. Nid yw hyn bob amser yn bosibl. Os yw'r botwm a'r cwymplen wedi'u crynhoi yn yr un gydran, mae symud un heb y llall yn golygu ailfeddwl am yr API cyfan. Ond pan allwch chi ei wneud, does dim byd i'w ddadfygio. Nid yw'r broblem yn bodoli. Yr hyn nad yw CSS Modern yn ei Ddatrys o hyd Mae CSS wedi dod yn bell yma, ond mae yna leoedd o hyd y mae'n eich siomi. Y sefyllfa: mae materion sefydlog a thrawsnewid yn dal i fod yno. Mae yn y fanyleb yn fwriadol, sy'n golygu nad oes unrhyw ateb CSS yn bodoli. Os ydych chi'n defnyddio llyfrgell animeiddio sy'n lapio'ch cynllun mewn elfen wedi'i thrawsnewid, rydych chi'n ôl i angen pyrth neu leoliad angori. Mae CSS Anchor Poitioning yn addawol, ond yn newydd. Fel y soniwyd yn gynharach, mae angen polyfill ar Firefox o hyd ar yr adeg rwy'n ysgrifennu hwn. Rwyf wedi taro achosion ymyl cynllun ag ef a oedd yn gofyn am wrthdrawiadau nad oeddwn yn eu rhagweld. Os oes angen ymddygiad cyson arnoch ar draws pob porwr heddiw, rydych chi'n dal i estyn am JavaScript ar gyfer y rhannau anodd. Yr ychwanegiad yr wyf wedi newid fy llif gwaith ar ei gyfer mewn gwirionedd yw'r HTML Popover API, sydd bellach ar gael ym mhob porwr modern. Mae elfennau gyda'r priodoledd popover yn rendrad yn haen uchaf y porwr, uwchlaw popeth, heb fod angen lleoli JavaScript.
Mae trin dianc, diswyddo-ar-glicio y tu allan, a semanteg hygyrchedd solet yn rhad ac am ddim ar gyfer pethau fel awgrymiadau offer, teclynnau datgelu, a throshaenau syml. Dyma'r teclyn cyntaf i mi ei gyrraedd am y tro. Wedi dweud hynny, nid yw'n datrys lleoli. Mae'n datrys haenu. Mae angen lleoli angor neu JavaScript arnoch o hyd i alinio popover i'w sbardun. Mae API Popover yn delio â'r haenau. Mae lleoli angor yn trin y lleoliad. O'u defnyddio gyda'i gilydd, maen nhw'n cwmpasu'r rhan fwyaf o'r hyn y byddech chi'n ei gyrraedd yn flaenorol i lyfrgell ei wneud. Canllaw Penderfyniad Ar Gyfer Eich Sefyllfa Ar ôl mynd trwy hyn i gyd y ffordd galed, dyma sut rydw i wir yn meddwl am y dewis nawr.
Defnyddiwch borthol.Byddwn i'n defnyddio hwn pan fydd y sbardun yn byw'n ddwfn mewn cynwysyddion sgrolio nythu. Defnyddiais y patrwm hwn ar gyfer bwydlenni gweithredu bwrdd a'i baru ag adfer ffocws a gwiriadau hygyrchedd. Dyma'r opsiwn mwyaf dibynadwy, ond cyllidebwch amser ar gyfer y gwifrau ychwanegol. Defnyddiwch leoliad sefydlog. Mae hyn ar gyfer pan fyddwch mewn JavaScript fanila neu fframwaith ysgafn ac yn gallu gwirio nad oes hynafiad yn berthnasol i drawsnewidiadau neu hidlwyr. Mae'n syml i'w sefydlu ac yn hawdd ei ddadfygio, cyn belled â bod yr un cyfyngiad hwnnw'n dal. Defnyddiwch CSS Anchor Positioning.Reach ar gyfer hyn pan fydd cefnogaeth eich porwr yn caniatáu hynny. Os oes angen cefnogaeth Firefox, parwch ef gyda'r polyfill @oddbird. Dyma lle mae'r platfform yn mynd yn ei flaen yn y pen draw ac yn y pen draw bydd yn dod yn ddull gweithredu i chi. Ailstrwythuro'r DOM.Defnyddiwch hwn pan fydd y bensaernïaeth yn caniatáu hynny, a'ch bod am gael sero cymhlethdod amser rhedeg. Rwy'n credu mai dyma'r opsiwn sydd wedi'i danbrisio fwyaf. Cyfunwch batrymau. Gwnewch hyn pan fyddwch chi eisiau lleoli angor fel eich prif ddull, ynghyd â JavaScript wrth gefn ar gyfer porwyr heb eu cefnogi. Neu borth ar gyfer lleoliad DOM wedi'i baru â getBoundingClientRect () ar gyfer cywirdeb cydlynu.
Casgliad Roeddwn i’n arfer trin y byg hwn fel mater untro—rhywbeth i’w glytio a symud ymlaen ohono. Ond ar ôl i mi eistedd gydag ef yn ddigon hir i ddeall y tair system dan sylw - clipio gorlif, pentyrru cyd-destunau, a chynnwys blociau - peidiodd â theimlo ar hap. Gallwn edrych ar gwymplen wedi torri ac olrhain yn syth pa hynafiad oedd yn gyfrifol. Y newid hwnnw yn y ffordd y darllenais y DOM oedd y siop tecawê go iawn. Nid oes un ateb cywir. Roedd yr hyn y cyrhaeddais amdano yn dibynnu ar yr hyn y gallwn ei reoli yn y cod sylfaen: pyrth pan oedd y goeden hynafiaid yn anrhagweladwy; lleoli sefydlog pan oedd yn lân ac yn syml; symud yr elfen pan nad oedd dim yn fy rhwystro; a lleoli angor nawr,lle y gallaf. Beth bynnag y byddwch yn ei ddewis yn y pen draw, peidiwch â thrin hygyrchedd fel y cam olaf. Yn fy mhrofiad i, dyna'n union pryd y caiff ei hepgor. Y perthnasoedd ARIA, y rheolaeth ffocws, ymddygiad y bysellfwrdd - nid sglein mo'r rheini. Maen nhw'n rhan o'r hyn sy'n gwneud i'r peth weithio mewn gwirionedd. Edrychwch ar y cod ffynhonnell llawn yn fy repo GitHub. Darllen Pellach Dyma'r cyfeiriadau y gwnes i ddod yn ôl atynt wrth weithio trwy hyn:
Y Cyd-destun Pentyrru (MDN) “Canllaw Lleoli Angor CSS”, Juan Diego Rodriguez “Cychwyn Arni Gyda The Popover API”, Godstime Aburu UI arnawf (floating-ui.com) Gorlif CSS (MDN)
