Isimo sicishe sifane, okuyithebula ledatha elingaphakathi kwesiqukathi esiskroleka. Umugqa ngamunye unemenyu yesenzo, okwehliswayo okuncane okunezinketho ezithile, njengokuthi Hlela, Phindaphinda, futhi Susa. Uyayakha, ibonakala isebenza ngokuphelele yodwa, bese othile eyibeka ngaphakathi kwaleyo div eskrolekayo bese izinto ziyahlukana. Ngibone lesi siphazamisi esiqondile kuma-codebases amathathu ahlukene: isitsha, isitaki, kanye nohlaka, konke kuhlukile. I-bug, noma kunjalo, iyafana ngokuphelele. Ukwehliswa kunqunywa onqenqemeni lwesiqukathi. Noma ivele ngemuva kokuqukethwe okufanele kube ngaphansi kwayo. Noma isebenza kahle kuze kube yilapho umsebenzisi eskrola, bese iyakhukhuleka. Ufinyelela ku-z-index: 9999. Kwesinye isikhathi kuyasiza, kodwa ngezinye izikhathi akwenzi lutho nhlobo. Lokho kungahambisani kuwumkhondo wokuqala wokuthi kukhona okujulile okwenzekayo. Isizathu sokuthi ilokhu ibuya ukuthi amasistimu esiphequluli ahlukene amathathu ahilelekile, futhi onjiniyela abaningi baqonda ngayinye ngokwayo kodwa abalokothi bacabange ukuthi kwenzekani uma zontathu zishayisana: ukuchichima, ukupakisha okuqukethwe, kanye nokuqukatha amabhlogo.
Uma usuqonda ukuthi bobathathu bahlanganyela kanjani, izindlela zokuhluleka ziyayeka ukuzizwa ngokungahleliwe. Eqinisweni, ziyabikezelwa. Izinto Ezintathu Ezibangela Lokhu Empeleni Ake sibheke ngayinye yalezo zinto ngokuningiliziwe. Inkinga Yokuchichima Uma usetha ukuchichima: kufihliwe, kuchichima: skrola, noma kuchichima: ngokuzenzakalelayo kusici, isiphequluli sizonamathisela noma yini edlulela ngale kwemingcele yaso, okuhlanganisa inzalo emiswe ngokuphelele. .isitsha sokuskrola { ukuchichima: okuzenzakalelayo; ubude: 300px; /* Lokhu kuzonamathisela okwehliswayo, isitobhi esigcwele */ }
.okwehlayo { isikhundla: ngokuphelele; /* Akunandaba -- isasikwe .scroll-container */ }
Lokho kwangimangaza lapho ngiqala ukuhlangana khona. Bengizothatha indawo: i-absolute ingavumela into ethile ukuba ibaleke ekusikeni kwesiqukathi. Ayikwenzi. Empeleni, lokho kusho ukuthi imenyu emiswe ngokuphelele inganqanyulwa yinoma iliphi idlozi elinenani elichichimayo elingabonakali, ngisho noma lelo dlozi lingeyona ibhulokhi yemenyu equkethe. Ukugunda nokubeka amasistimu ahlukene. Zivele zishayisane ngezindlela ezibukeka zingahleliwe uze uziqonde zombili.
Nasi isibonelo se-React usebenzisa i-createPortal:
ngenisa i-{ createPortal } isuka 'ku-react-dom'; ngenisa okuthi {useState, useEffect, useRef } kusuka ku-'react';
function Dropdown({ anchorRef, isOpen, children }) { const [isikhundla, setPosition] = useState({phezulu: 0, kwesokunxele: 0});
useEffect(() => { uma (isOpen && anchorRef.current) { const rect = anchorRef.current.getBoundingClientRect(); setPosition({ phezulu: rect.bottom + window.scrollY, kwesokunxele: rect.left + window.scrollX, }); } }, [isOpen, anchorRef]);
uma (!isOpen) ibuyisela i-null;
buyisela ukudalaPortal(
Futhi, kunjalo, asikwazi ukukuziba ukufinyeleleka. Izinto ezilungisiwe ezivela phezu kokuqukethwe kusafanele zifinyeleleke kukhibhodi. Uma i-oda lokugxilisa ingqondo lingahambi ngokwemvelo kokwehla okugxilile, uzodinga ukuliphatha usebenzisa ikhodi. Kuyafaneleka futhi ukuhlola ukuthi ayihlali phezu kokunye okuqukethwe okusebenzisanayo ingenayo indlela yokuyichitha. Lowo uyakuluma ekuhloleni ikhibhodi. I-CSS Anchor Positioning: Lapho Ngicabanga Ukuthi Lokhu Kubheke Khona I-CSS Anchor Positioning iyindlela engithakasela kakhulu ngayo njengamanje. Bengingenaso isiqiniseko sokuthi ingakanani i-spec engasetshenziswa lapho ngiqala ukuyibuka. Ikuvumela ukuthi umemezele ubudlelwano phakathi kokudonsela phansi kanye nesiqalisi sakhona ngqo ku-CSS, futhi isiphequluli siphatha izixhumanisi. .cupha { i-anchor-name: --my-trigger; }
.imenyu eyehlayo { isikhundla: ngokuphelele; isikhundla-ihange: --my-trigger; phezulu: ihange (phansi); kwesokunxele: ihange (kwesokunxele); isikhundla-zama-fallbacks: flip-block, flip-inline; }
Isici se-position-try-fallbacks yiyona eyenza lokhu kuzuze ukusetshenziswa phezu kokubala okwenziwa ngesandla. Isiphequluli sizama okunye ukubekwa ngaphambi kokuyeka, ngakho-ke okudonsela phansi phansi kwendawo yokubuka kuphendukisela phezulu ngokuzenzakalelayo esikhundleni sokunqanyulwa. Usekelo lwesiphequluli luqinile kuziphequluli ezisekelwe ku-Chromium futhi luyakhula eSafari. IFirefox idinga i-polyfill. Iphakheji ye-@oddbird/css-anchor-positioning ifaka i-core spec. Ngishaye amanqenqema esakhiwo ngawo adinga ukuhlehla ebengingakulindele, ngakho-ke kuphathe njengesithuthukisi esiqhubekayo noma uyibhanqe neUkubuyela emuva kweJavaScript yeFirefox. Ngamafuphi, siyathembisa kodwa hhayi jikelele okwamanje. Hlola kuziphequluli zakho oziqondise. Futhi mayelana nokufinyeleleka okuthintekayo, ukumemezela ubudlelwano obubonakalayo ku-CSS ayisitsheli isihlahla sokufinyeleleka noma yini. i-aria-controls, i-aria-expanded, i-aria-haspopup — leyo ngxenye isekuwe. Kwesinye isikhathi Ukulungiswa Kuvele Kunyakaze Isici Ngaphambi kokuthola ingosi noma ukwenza izibalo zokudidiyela, ngihlala ngibuza umbuzo owodwa kuqala: Ingabe lokhu okwehlayo kudinga ngempela ukuhlala ngaphakathi kwesiqukathi sokuskrola? Uma kungenjalo, ukuhambisa umaki kusisonga sezinga eliphezulu kususa inkinga ngokuphelele, ngaphandle kwe-JavaScript futhi kungekho zibalo ezididiyelwe. Lokhu akwenzeki njalo. Uma inkinobho nokudonsela phansi kuhlanganiswe engxenyeni efanayo, ukuhambisa eyodwa ngaphandle kwenye kusho ukucabanga kabusha yonke i-API. Kodwa uma ungakwenza, akukho lutho ongakulungisa. Inkinga ayikho nje. Lokho I-CSS Yesimanje Engakaxazululi I-CSS ihambe ibanga elide lapha, kodwa zisekhona izindawo ekuvumela ukuthi uphelelwe amandla. Isikhundla: izinkinga ezilungisiwe nezishintshile zisekhona. Iku-Special ngamabomu, okusho ukuthi akukho ukusebenza kwe-CSS okukhona. Uma usebenzisa ilabhulali yokugqwayiza esonga isakhiwo sakho ngento eguquliwe, ubuyela ekudingeni amaphothali noma ukuma kwehange. I-CSS Anchor Positioning iyathembisa, kodwa entsha. Njengoba kushiwo ngaphambili, iFirefox isadinga i-polyfill ngesikhathi ngibhala lokhu. Ngishaye izehlakalo ezinqenqemeni ngayo ezidinga ukuhlehla ebengingakulindele. Uma udinga ukuziphatha okungaguquki kuzo zonke iziphequluli namuhla, usafinyelela ku-JavaScript ukuze uthole izingxenye eziwubuqili. Ukwengeza engikuguqulele ukuhamba kwami komsebenzi yi-HTML Popover API, manje etholakala kuzo zonke iziphequluli zesimanje. Izinto ezinesibaluli se-popover zinikeza isendlalelo esiphezulu sesiphequluli, ngaphezu kwakho konke, ngaphandle kokuma kwe-JavaScript okudingekayo.
Ukuphatha u-Escape, ukucashisa-ngokuchofoza-ngaphandle, kanye nama-semantics okufinyeleleka okuqinile kutholakala mahhala ezintweni ezifana namathiphu amathuluzi, amawijethi okuveza ulwazi, nezimbondela ezilula. Ithuluzi lokuqala engifinyelela kulo manje. Lokho kusho, akuxazululi ukuma. Ixazulula ukwendlaleka. Usadinga i-anchor positioning noma i-JavaScript ukuze uqondanise i-popover nesiqalisi sayo. I-Popover API iphatha isendlalelo. Ukuma kwehange kusingatha ukubekwa. Uma zisetshenziswa ndawonye, zihlanganisa okuningi kwalokho obufinyelele kukho ukuze umtapo wezincwadi ukwenze. Umhlahlandlela Wesinqumo Wesimo Sakho Ngemuva kokubhekana nakho konke lokhu kanzima, nansi indlela engicabanga ngayo ngokukhetha manje.
Sebenzisa ingosi.Ngingasebenzisa lokhu uma isibangeli sihlala ekujuleni kweziqukathi zokuskrola ezivalelwe. Ngisebenzise le phethini kumamenyu wesenzo sethebula futhi ngayibhanqa nokubuyisela okugxilile nokuhlola ukufinyeleleka. Inketho ethembeke kakhulu, kepha isikhathi sesabelomali sezintambo ezengeziwe. Sebenzisa ukuma okungaguquki.Lokhu okwalapho uku-vanilla JavaScript noma uhlaka olulula futhi lungaqinisekisa ukuthi awekho amadlozi asebenzayo okuguqula noma okokuhlunga. Kulula ukusetha futhi kulula ukuyisusa, inqobo nje uma lowo mkhawulo usabambekile. Sebenzisa i-CSS Anchor Positioning.Finyelela kulokhu uma ukwesekwa kwesiphequluli sakho kukuvumela. Uma usekelo lweFirefox ludingeka, lubhanqe ne-@oddbird polyfill. Yilapho iplatifomu iphokophele khona futhi ekugcineni izoba yindlela yakho yokusondela. Hlela kabusha i-DOM.Sebenzisa lokhu uma izakhiwo zikuvumela, futhi ufuna ukungabikho kwenkimbinkimbi yesikhathi sokusebenza. Ngikholwa ukuthi inketho engaphansi kakhulu. Hlanganisa amaphethini.Yenza lokhu uma ufuna ukuma kwehange njengendlela yakho eyinhloko, ebhangqwe ne-JavaScript ebuyela emuva yeziphequluli ezingasekelwa. Noma ingosi yokubekwa kwe-DOM ebhangqwe ne-getBundingClientRect() ukuze uthole ukunemba kokudidiyela.
Isiphetho Ngangivame ukuphatha lesi siphazamisi njengodaba oluphuma kanye - into engizoyichibiyela bese ngisuka kuyo. Kodwa lapho sengihlale nayo isikhathi eside ngokwanele ukuze ngiqonde zonke izinhlelo ezintathu ezihilelekile - ukusika okuchichimayo, ukupakisha okuqukethwe, kanye namabhulokhi aqukethe - kuyeka ukuzizwa okungahleliwe. Ngangikwazi ukubheka ukwehla okuphukile futhi ngilandele ngokushesha ukuthi yiliphi idlozi elawenza. Lokho kushintsha endleleni engangifunda ngayo i-DOM kwakuyinto yangempela yokuthatha. Ayikho impendulo eyodwa efanele. Engafinyelela kukho kwakuncike kulokho engangingakulawula ku-codebase: izingosi lapho isihlahla samadlozi singalindelekile; ukuma okungaguquki lapho kuhlanzekile futhi kulula; ukuhambisa isakhi lapho kungekho okwakungivimba; nokumiswa kwehange manje,lapho engingakwazi khona. Noma ngabe yini ogcina uyikhetha, ungaphathi ukufinyeleleka njengesinyathelo sokugcina. Ngokuhlangenwe nakho kwami, yilapho kanye yeqiwa. Ubudlelwano be-ARIA, ukuphathwa okugxilwe kukho, ukuziphatha kwekhibhodi - lokho akulona ipholishi. Bayingxenye yalokho okwenza into isebenze ngempela. Bheka ikhodi yomthombo egcwele ku-repo yami ye-GitHub. Ukufunda Okuqhubekayo Lezi yizithenjwa ebengilokhu ngibuyela kuzo ngenkathi ngisebenza ngalokhu:
I-Stacking Context (MDN) "I-CSS Anchor Positioning Guide", uJuan Diego Rodriguez “Ukuqalisa Nge-Popover API”, Godstime Aburu I-UI entantayo (floating-ui.com) Ukuchichima kwe-CSS (MDN)
