Сценарий һәрвакыт диярлек бер үк, ул әйләндерелә торган контейнер эчендәге мәгълүмат таблицасы. Everyәр рәттә эш менюсы бар, үзгәртү, кабатлау һәм бетерү кебек кайбер вариантлар белән кечкенә тамчы. Сез аны төзисез, бу изоляциядә бик яхшы эшли кебек, аннары кемдер аны әйләндереп була торган див эченә куя һәм әйберләр җимерелә. Мин бу төгәл хатаны өч төрле код базасында күрдем: контейнер, стек һәм рамка, барысы да төрле. Хата, ләкин бөтенләй охшаш. Тамчы контейнер читенә кысыла. Яисә ул логик яктан түбән булырга тиеш эчтәлек артында күрсәтә. Яисә кулланучы әйләндергәнче яхшы эшли, аннары ул читкә китә. Сез z-индекска ирешәсез: 9999. Кайвакыт ул ярдәм итә, ләкин бүтән вакытта ул бернәрсә дә эшләми. Бу туры килмәү - тирәнрәк нәрсә булганын күрсәтүче беренче мәгълүмат. Кире кайтуының сәбәбе - өч аерым браузер системасы катнашуы, һәм күпчелек уйлап табучылар һәрберсен үзләре аңлыйлар, ләкин өчесе дә бәрелешкәндә нәрсә булачагы турында беркайчан да уйламыйлар: ташып китү, контекстлар туплау һәм блоклар.
Өчесенең дә үзара бәйләнешен аңлагач, уңышсызлык режимнары очраклы тоелудан туктый. Чынлыкта, алар алдан әйтеп була. Өч нәрсә Әйдәгез, бу әйберләрнең һәрберсенә җентекләп карыйк. Агып китү проблемасы Агымны куйгач: яшерен, ташып торган: әйләндерү, яки ташып китү: элементта автомобиль, браузер чиктән тыш киң таралганны, шул исәптән абсолют урнашкан буыннарны да кыскартачак. .scroll-контейнер { ташып китү: автомобиль; биеклеге: 300px; / * Бу тамчы, тулы тукталышны төшерәчәк * / }
.dropdown { позиция: абсолют; / * Бик мөһим түгел - һаман да .scroll-контейнер белән киселгән * / }
Бу мине беренче тапкыр йөгерде. Мин позицияне уйладым: абсолют элемент контейнерның киселүеннән кача. Бу юк. Гамәлдә, бу бөтенләй урнашкан менюны күренми торган ташып торган кыйммәткә ия булган ата-бабалар кисеп ала ала, хәтта бу ата-бабалар меню блокы булмаса да. Клиплау һәм урнаштыру аерым системалар. Алар икесен дә аңлаганчы бөтенләй очраклы күренгәнчә бәрелешәләр.
Менә createPortal кулланып реакция мисалы:
'react-dom' дан {createPortal import кертү; импорт {useState, useEffect, useRef '' реакциядән 'кертү;
Dropdown функциясе ({anchorRef, isOpen, балалар}) { const [позиция, setPosition] = useState ({өстә: 0, сулда: 0});
useEffect (() => { if (isOpen && anchorRef.current) { const rect = anchorRef.current.getBoundingClientRect (); setPosition ({ өстә: rect.bottom + windows.scrollY, сулда: rect.left + windows.scrollX, }); } }, [isOpen, anchorRef]);
if (! isOpen) кире кайту;
returnPortal (
, Әм, әлбәттә, без мөмкинлекне санга сукмыйбыз. Эчтәлек өстендә барлыкка килгән тотрыклы элементлар әле дә клавиатурага барып җитәргә тиеш. Әгәр фокус тәртибе табигый рәвештә тамчы тамчыга күчмәсә, сезгә аны код ярдәмендә идарә итәргә кирәк. Моннан тыш, аның бүтән интерактив эчтәлек өстендә утырмавын тикшерергә кирәк. Бу сезне клавиатура тестында тешли. CSS Анкор позициясе: Минем уйлавымча, бу юл CSS Анкор позициясе - мин хәзерге вакытта иң кызыксынган юнәлеш. Беренче тапкыр карагач, спектакльнең күпме кулланылуы турында белми идем. Бу турыдан-туры CSS-та төшү һәм аның триггеры арасындагы бәйләнешне игълан итәргә мөмкинлек бирә, һәм браузер координаталар белән эш итә. .Триггер { анкор-исем: --my-trigger; }
.dropdown-menu { позиция: абсолют; позиция-якор: - минем-триггер; өске: якорь (аста); сулда: якорь (сулда); позиция-сынау-кире кайту: флип-блок, флип-сызык; }
Позиция-сынау-кире кайту милеге - моны кул белән исәпләү өстендә кулланырга кирәк. Браузер бирешкәнче альтернатив урнаштырырга тырыша, шуңа күрә күренеш төбендәге тамчы киселү урынына автоматик рәвештә өскә күтәрелә. Хром нигезендәге браузерларда браузер ярдәме нык һәм Safariда үсә. Firefox полифиллга мохтаҗ. @ Oddbird / css-анкор-позиция пакеты төп спекны каплый. Мин аның белән макетның чит очракларын сугтым, мин көтмәгән кире кайтуны таләп итә, шуңа күрә аны прогрессив көчәйтү кебек кабул итегез яки а белән бәйләгез.Firefox өчен JavaScript кире кайту. Кыскасы, өметле, ләкин әле универсаль түгел. Максатлы браузерларда сынап кара. Accessәм мөмкинлеккә килгәндә, CSS-та визуаль бәйләнеш игълан итү, агачка бернәрсә дә әйтми. ария-контроль, ария-киңәйтелгән, ария-гаспопуп - бу өлеш әле сездә. Кайвакыт төзәтмә элементны күчерә Порталга яисә координаталар исәпләүләрен ясаганчы, мин һәрвакыт башта бер сорау бирәм: бу төшү чыннан да әйләндерү контейнеры эчендә яшәргә тиешме? Әгәр дә булмаса, марканы югарырак дәрәҗәдәге төргәккә күчерү проблеманы тулысынча бетерә, JavaScript һәм координаталар исәпләве юк. Бу һәрвакыт мөмкин түгел. Әгәр төймә һәм төшү бер үк компонентта тупланган булса, берсен икенчесеннән күчерү бөтен API турында яңадан уйлау дигән сүз. Ләкин моны эшли алгач, төзәтер өчен бернәрсә дә юк. Проблема юк. Хәзерге CSS нәрсә чишә алмый CSS монда бик озын юл үтте, ләкин сезне рөхсәт иткән урыннар бар. Позиция: тотрыклы һәм үзгәртү проблемалары әле дә бар. Бу белә торып, CSS эше юк дигән сүз. Әгәр дә сез үз макетыгызны үзгәртелгән элементка төреп торган анимация китапханәсен кулланасыз икән, сез порталларга яки якор позициясенә мохтаҗ. CSS Анкор позициясе өметле, ләкин яңа. Алда әйтелгәнчә, мин язган вакытта Firefox әле полифиллга мохтаҗ. Мин аның белән макетның чит очракларын таптым, бу мин көтмәгән кире кайтуны таләп итә. Әгәр дә сезгә бүген барлык браузерларда эзлекле тәртип кирәк булса, сез һаман да катлаулы өлешләр өчен JavaScript эзлисез. Минем эш процессымны үзгәрткән өстәмә - HTML Popover API, хәзерге барлык браузерларда. Поповер атрибутик элементлар браузерның иң югары катламында күрсәтелә, барыннан да бигрәк, JavaScript урнаштыру кирәк түгел.
<төймә popovertarget = "тамчы-демо"> Ачык
Эшләүдән качу, чыккач, эштән чыгару, каты керү семантикасы кораллар, виджетларны ачу, гади каплау кебек әйберләр өчен бушлай чыга. Бу мин хәзерге вакытта беренче корал. Димәк, бу позицияне чишә алмый. Катламны чишә. Сезгә һаман да анкор позициясе яки JavaScript кирәк. Popover API катлам белән эш итә. Анкор позициясе урнаштыру белән идарә итә. Бергә кулланылса, алар сез китапханә өчен эшләгән әйберләрнең күбесен үз эченә ала. Сезнең хәлегез өчен карар Боларның барысын да үткәннән соң, мин хәзер сайлау турында ничек уйлыйм.
Портал кулланыгыз. Мин моны триггер ояланган әйләндерү контейнерларында тирән яшәгәндә кулланам. Мин бу үрнәкне өстәл эш менюлары өчен кулландым һәм аны фокус реставрацияләү һәм мөмкинлекне тикшерү белән бәйләдем. Бу иң ышанычлы вариант, ләкин өстәмә чыбык өчен бюджет вакыты. Туры позицияне кулланыгыз. Бу ваниль JavaScript яки җиңел рамкада булганда һәм бер ата-бабаның трансформация яки фильтр кулланмавын тикшерә аласыз. Бу чикләү гади булганда көйләү һәм төзәтү гади. CSS Анкор Позициясен кулланыгыз. Браузерыгыз рөхсәт биргәндә моның өчен ирешегез. Firefox ярдәме кирәк булса, аны @oddbird полифилл белән бәйләгез. Монда платформа ахыр чиктә бара һәм ахыр чиктә сезнең карашка әйләнәчәк. DOM-ны реструктуризацияләгез. Моны архитектура рөхсәт иткәндә кулланыгыз, һәм сез эш вакыты катлаулылыгын телисез. Минем уйлавымча, бу иң түбән вариант. Patternрнәкләрне берләштерегез. Анкорны төп алым итеп урнаштырырга теләгәндә эшләгез, ярдәм ителмәгән браузерлар өчен JavaScript кире кайтуы белән парлаштырылган. Яисә координаталарның төгәллеге өчен getBoundingClientRect () белән парлаштырылган DOM урнаштыру порталы.
Йомгаклау Мин бу хатаны бер тапкыр чыгару дип саный идем - нәрсәдер ябыштырырга. Ләкин бер тапкыр мин аның белән катнашкан өч системаны да аңлар өчен озак утырдым - ташып китү, контекстларны туплау һәм блоклар - ул очраклы хис итүдән туктады. Мин ватылган тамчыга карый идем һәм шунда ук ата-бабалар өчен җаваплы. ДОМны ничек укыганымдагы бу смена чын мәгънәсендә алып бару булды. Дөрес җавап юк. Мин нәрсәгә ирештем, код базасында нәрсә белән идарә итә алуыма бәйле иде: ата-бабалар агачын алдан әйтеп булмый торган порталлар; чиста һәм гади булганда тотрыклы позиция; миңа бернәрсә дә комачауламаган элементны күчерү; һәм хәзер якор позициясе,мин кайда. Нәрсә генә сайласаң да, соңгы адым кебек мөмкинлекне кабул итмә. Минем тәҗрибәмдә, ул нәкъ шул вакытта. ARIA мөнәсәбәтләре, фокус белән идарә итү, клавиатура тәртибе - алар чиста түгел. Алар әйберне эшләтеп җибәрүче өлеш. Минем GitHub реподагы тулы чыганак кодын карагыз. Киләсе уку Бу эшләгәндә кире кайткан сылтамалар:
Тапшыру контексты (MDN) "CSS Анкорны урнаштыру буенча кулланма", Хуан Диего Родригес "Popover API белән башлау", Godstime Aburu Йөзүче UI (floating-ui.com) CSS ташкыны (MDN)
