Stsenariy deyarli har doim bir xil, ya'ni aylantiriladigan konteyner ichidagi ma'lumotlar jadvali. Har bir satrda harakat menyusi, tahrirlash, takrorlash va o'chirish kabi ba'zi variantlardan iborat kichik ochiladigan menyu mavjud. Siz uni qurasiz, u yakka holda mukammal ishlaydi, keyin kimdir uni o'sha aylantiriladigan div ichiga qo'yadi va narsalar parchalanib ketadi. Men ushbu aniq xatoni uch xil kod bazasida ko'rdim: konteyner, stek va ramka, barchasi boshqacha. Biroq, xato butunlay bir xil. Ochiladigan menyu konteyner chetida kesiladi. Yoki u mantiqan pastda bo'lishi kerak bo'lgan tarkibning orqasida ko'rinadi. Yoki foydalanuvchi aylanmaguncha yaxshi ishlaydi va keyin u siljiydi. Siz z-indeksga erishasiz: 9999. Ba'zida bu yordam beradi, lekin ba'zida u hech narsa qilmaydi. Bu nomuvofiqlik chuqurroq narsa sodir bo'layotganining birinchi belgisidir. Uning qaytib kelishining sababi shundaki, uchta alohida brauzer tizimi ishtirok etadi va ko'pchilik ishlab chiquvchilar har birini o'z-o'zidan tushunadilar, lekin uchtasi to'qnashganda nima sodir bo'lishini hech qachon o'ylamaydilar: to'lib toshgan, kontekstlarni yig'ish va bloklarni o'z ichiga olgan.
Uchalasining o'zaro ta'sirini tushunganingizdan so'ng, muvaffaqiyatsizlik rejimlari tasodifiy his qilishni to'xtatadi. Darhaqiqat, ular oldindan aytish mumkin bo'ladi. Bunga haqiqatda sabab bo'lgan uchta narsa Keling, ushbu elementlarning har birini batafsil ko'rib chiqaylik. Toshib ketish muammosi Elementga overflow: hidden, overflow: scroll yoki overflow: auto o‘rnatganingizda, brauzer o‘z chegarasidan tashqariga chiqadigan hamma narsani, jumladan, to‘liq joylashtirilgan avlodlarni ham qirqadi. .scroll-container { toshib ketish: avtomatik; balandligi: 300px; /* Bu ochiladigan ro'yxatni kesib tashlaydi, nuqta */ }
.ochiladigan pastga { pozitsiyasi: mutlaq; /* Muhim emas -- hali .scroll-container tomonidan kesilgan */ }
Birinchi marta duch kelganimda bu meni hayratda qoldirdi. Men pozitsiyani egallagan edim: mutlaq elementga konteyner qirqishidan qochish imkonini beradi. Unday emas. Amalda, bu mutlaq joylashtirilgan menyuni ko'rinmaydigan ortiqcha qiymatga ega bo'lgan har qanday ajdod tomonidan uzilishi mumkinligini anglatadi, hatto bu ajdod menyuning bloki bo'lmasa ham. Kesish va joylashtirish alohida tizimlardir. Siz ikkalasini tushunmaguningizcha, ular tasodifiy ko'rinadigan tarzda to'qnashadi.
Mana createPortal yordamida reaksiyaga misol:
"react-dom" dan { createPortal } ni import qiling; import { useState, useEffect, useRef } 'react' dan;
Ochiladigan funksiya ({anchorRef, isOpen, bolalar }) { const [pozitsiya, setPosition] = useState ({ tepa: 0, chap: 0 });
useEffect(() => { agar (isOpen && anchorRef.current) { const rect = anchorRef.current.getBoundingClientRect(); setPosition({ yuqori: rect.bottom + window.scrollY, chap: rect.left + window.scrollX, }); } }, [isOpen, anchorRef]);
agar (!isOpen) nullni qaytaradi;
createPortal(
Va, albatta, biz foydalanish imkoniyatini e'tiborsiz qoldira olmaymiz. Kontent ustida paydo bo'ladigan o'zgarmas elementlar hali ham klaviaturada mavjud bo'lishi kerak. Agar fokus tartibi tabiiy ravishda belgilangan ochiladigan menyuga o'tmasa, uni kod yordamida boshqarishingiz kerak bo'ladi. Bundan tashqari, u boshqa interaktiv tarkibga o'tirmasligini tekshirishga arziydi, uni rad etishning hech qanday usuli yo'q. Klaviatura sinovida bu sizni tishlaydi. CSS langarining joylashuvi: bu menimcha, qayerga boradi CSS Anchor Positioning - bu meni hozir eng ko'p qiziqtiradigan yo'nalish. Men uni birinchi marta ko'rib chiqqanimda uning qancha qismi aslida foydalanish mumkinligiga ishonchim komil emas edi. Bu sizga ochiladigan ro'yxat va uning trigger o'rtasidagi munosabatni bevosita CSS-da e'lon qilish imkonini beradi va brauzer koordinatalarni boshqaradi. .trigger { anchor-name: --my-trigger; }
.ochiladigan menyu { pozitsiyasi: mutlaq; pozitsiya-langar: --my-trigger; tepa: langar (pastki); chapda: langar (chapda); pozitsiyani sinab ko'rish-qaytarilishlar: flip-block, flip-inline; }
Pozitsiyani sinab ko'rish-fallbacks xususiyati bu qo'lda hisoblashda foydalanishga arziydi. Brauzer voz kechishdan oldin muqobil joylashtirishlarni sinab ko'radi, shuning uchun ko'rish oynasining pastki qismidagi ochiladigan menyu uzilish o'rniga avtomatik ravishda yuqoriga buriladi. Brauzerni qo'llab-quvvatlash Chromium-ga asoslangan brauzerlarda mustahkam va Safari-da o'sib bormoqda. Firefox-ga polifill kerak. @oddbird/css-anchor-positioning to'plami asosiy xususiyatlarni qamrab oladi. Men u bilan men kutmagan zaxiralarni talab qiladigan layout edge holatlariga erishdim, shuning uchun uni progressiv yaxshilash sifatida ko'ring yoki uniFirefox uchun JavaScript zaxira. Qisqasi, istiqbolli, lekin hali universal emas. Maqsadli brauzerlarda sinab ko'ring. Kirish imkoniyatiga kelsak, CSS-da vizual aloqani e'lon qilish mavjudlik daraxtiga hech narsa aytmaydi. aria-nazorat, ariya-kengaytirilgan, aria-haspopup - bu qism hali ham sizda. Ba'zan tuzatish faqat elementni harakatga keltiradi Portalga murojaat qilish yoki koordinatalarni hisoblashdan oldin, men har doim birinchi navbatda bitta savol beraman: bu ochiladigan ro'yxat aslida aylantirish konteynerida yashashi kerakmi? Agar shunday bo'lmasa, belgilashni yuqori darajadagi o'ramga o'tkazish JavaScript va koordinata hisoblarisiz muammoni butunlay yo'q qiladi. Bu har doim ham mumkin emas. Agar tugma va ochiladigan menyu bir xil komponentda joylashgan bo'lsa, birini ikkinchisisiz ko'chirish butun APIni qayta ko'rib chiqishni anglatadi. Ammo buni qila olsangiz, tuzatish uchun hech narsa yo'q. Muammo shunchaki mavjud emas. Zamonaviy CSS nima hali ham hal qilmaydi CSS bu erda uzoq yo'lni bosib o'tdi, lekin hali ham sizni tushkunlikka soladigan joylar mavjud. Lavozim: tuzatilgan va o'zgartirilgan muammolar hali ham mavjud. Bu ataylab spetsifikatsiyada, ya'ni hech qanday CSS vaqtinchalik yechim mavjud emas. Agar siz tartibingizni o'zgartirilgan elementga o'rab oladigan animatsiya kutubxonasidan foydalansangiz, sizga portallar yoki langar joylashuvi kerak bo'ladi. CSS Anchor Positioning istiqbolli, ammo yangi. Yuqorida aytib o'tilganidek, men buni yozayotganimda Firefox hali ham polifillga muhtoj. Men u bilan men kutmagan zaxiralarni talab qiladigan layout edge holatlarini urdim. Agar sizga bugungi kunda barcha brauzerlarda izchil harakat kerak bo'lsa, siz hali ham murakkab qismlar uchun JavaScript-ga murojaat qilyapsiz. Men ish jarayonini o'zgartirgan qo'shimcha HTML Popover API bo'lib, endi barcha zamonaviy brauzerlarda mavjud. Popover atributiga ega elementlar brauzerning yuqori qatlamida, hamma narsadan yuqori, JavaScript joylashuvini talab qilmaydi.
Ishlov berishdan qochish, tashqarida bosilganda oʻchirish va qatʼiy mavjudlik semantikasi maslahatlar, oshkor qilish vidjetlari va oddiy qoplamalar kabi narsalar uchun bepul keladi. Bu hozircha men erishgan birinchi vosita. Ya'ni, bu joylashishni hal qilmaydi. Bu qatlamlarni hal qiladi. Popoverni tetikiga moslashtirish uchun sizga hali ham langar joylashuvi yoki JavaScript kerak bo'ladi. Popover API qatlamni boshqaradi. Anchor joylashuvi joylashtirishni boshqaradi. Birgalikda foydalanilganda, ular kutubxonada qilish uchun ilgari erishgan narsalaringizning ko'pini qamrab oladi. Vaziyatingiz uchun qaror qabul qilish bo'yicha qo'llanma Bularning barchasini qiyin yo'ldan o'tkazganimdan so'ng, men hozir tanlov haqida qanday o'ylayman.
Portaldan foydalaning. Trigger ichki oʻrnatilgan aylantirish konteynerlarida chuqur joylashganda men bundan foydalanardim. Men ushbu naqshni jadvaldagi harakatlar menyusi uchun ishlatganman va uni fokusni tiklash va foydalanish imkoniyatini tekshirish bilan bog'laganman. Bu eng ishonchli variant, ammo qo'shimcha simlar uchun byudjet vaqti. Ruxsat etilgan joylashishni aniqlashdan foydalaning. Bu vanil JavaScript yoki engil tizimda bo'lganingizda va hech qanday ajdod o'zgartirish yoki filtrlarni qo'llamasligini tekshira olmaganingiz uchun. Sozlash oson va disk raskadrovka qilish oson, faqat bitta cheklov mavjud bo'lsa. Brauzeringiz qo'llab-quvvatlashi ruxsat berganida, buning uchun CSS Anchor Positioning.Reach-dan foydalaning. Agar Firefox qo'llab-quvvatlashi kerak bo'lsa, uni @oddbird polyfill bilan bog'lang. Bu platforma oxir-oqibat yo'nalish bo'lib, oxir-oqibat sizning yondashuvingizga aylanadi. DOM tuzilmasini qayta tuzing. Arxitektura ruxsat berganda undan foydalaning va siz nol ish vaqti murakkabligini xohlasangiz. Menimcha, bu eng past baholangan variant. Naqshlarni birlashtiring. Buni qoʻllab-quvvatlanmaydigan brauzerlar uchun JavaScript zaxirasi bilan bogʻlangan asosiy yondashuv sifatida langar joylashuvini aniqlashni istasangiz, buni bajaring. Yoki koordinatalar aniqligi uchun getBoundingClientRect() bilan birlashtirilgan DOM joylashtirish portali.
Xulosa Men bu xatoni bir martalik muammo sifatida ko'rib chiqdim - tuzatish va davom ettirish kerak bo'lgan narsa. Ammo men u bilan bog'liq bo'lgan uchta tizimni - to'lib-toshgan kesish, stacking kontekstlari va bloklarni o'z ichiga olgan tizimni tushunish uchun etarlicha uzoq o'tirganimdan so'ng, u tasodifiy his qilishni to'xtatdi. Men buzilgan ochiladigan ro'yxatni ko'rib, qaysi ajdod javobgar ekanligini darhol aniqlashim mumkin edi. DOMni o'qishimdagi o'sha o'zgarish haqiqiy yutuq edi. Bitta to'g'ri javob yo'q. Men erishgan narsa kodlar bazasida nima nazorat qila olishimga bog'liq edi: ajdodlar daraxtini oldindan aytib bo'lmaydigan portallar; toza va oddiy bo'lganda sobit joylashishni aniqlash; hech narsa meni to'xtatmaganda elementni ko'chirish; va endi langar joylashuvi,qaerda mumkin. Nimani tanlasangiz ham, kirish imkoniyatini oxirgi qadam deb hisoblamang. Mening tajribamga ko'ra, aynan shu vaqt o'tkazib yuboriladi. ARIA munosabatlari, fokusni boshqarish, klaviatura harakati - bular jilo emas. Ular bu narsani haqiqatda ishlaydigan narsaning bir qismidir. GitHub repo-da to'liq manba kodini tekshiring. Qo'shimcha o'qish Bular ustida ishlayotganda men qaytib kelgan havolalar:
Stacking konteksti (MDN) "CSS Anchor Positioning Guide", Xuan Diego Rodriges "Popover API bilan ishlashni boshlash", Godstime Aburu Floating UI (floating-ui.com) CSS Overflow (MDN)
