අනුචලනය කළ හැකි කන්ටේනරයක් තුළ ඇති දත්ත වගුවක් වන දර්ශනය සෑම විටම පාහේ සමාන වේ. සෑම පේළියකටම ක්රියා මෙනුවක් ඇත, සංස්කරණය කිරීම, අනුපිටපත් කිරීම සහ මකන්න වැනි විකල්ප කිහිපයක් සහිත කුඩා පතනයක් ඇත. ඔබ එය ගොඩනඟයි, එය හුදකලාවේ පරිපූර්ණව ක්රියා කරන බව පෙනේ, පසුව යමෙකු එය අනුචලනය කළ හැකි ඩිව් එක තුළට දමා දේවල් කඩා වැටේ. මම මෙම නිවැරදි දෝෂය විවිධ කේත පදනම් තුනකින් දුටුවෙමි: බහාලුම, තොගය සහ රාමුව, සියල්ල වෙනස්. කෙසේ වෙතත්, දෝෂය සම්පූර්ණයෙන්ම සමාන වේ. පහත වැටීම බහාලුම් කෙළවරේ කපා ඇත. නැතහොත් එය තාර්කිකව ඊට පහළින් තිබිය යුතු අන්තර්ගතය පිටුපස පෙන්වයි. නැතහොත් පරිශීලකයා අනුචලනය වන තෙක් එය හොඳින් ක්රියා කරයි, පසුව එය ප්ලාවනය වේ. ඔබ z-දර්ශකය වෙත ළඟා වේ: 9999. සමහර විට එය උපකාරී වේ, නමුත් වෙනත් විට එය සම්පූර්ණයෙන්ම කිසිවක් නොකරයි. එම නොගැලපීම ගැඹුරු දෙයක් සිදුවෙමින් පවතින බවට පළමු ඉඟියයි. එය නැවත පැමිණීමට හේතුව වන්නේ වෙන වෙනම බ්රවුසර පද්ධති තුනක් සම්බන්ධ වී ඇති අතර බොහෝ සංවර්ධකයින් එකින් එක තේරුම් ගන්නා නමුත් තුනම එකිනෙක ගැටෙන විට සිදුවන දේ ගැන කිසි විටෙකත් සිතන්නේ නැත: පිටාර ගැලීම, සන්දර්භ ගොඩගැසීම සහ කුට්ටි අඩංගු වීම.
තුනම අන්තර්ක්රියා කරන ආකාරය ඔබ තේරුම් ගත් පසු, අසාර්ථක මාදිලි අහඹු ලෙස දැනීම නතර කරයි. ඇත්ත වශයෙන්ම, ඒවා පුරෝකථනය කළ හැකි බවට පත්වේ. ඇත්ත වශයෙන්ම මෙයට හේතු වන කරුණු තුන එම එක් එක් අයිතමයන් විස්තරාත්මකව බලමු. පිටාර ගැලීමේ ගැටලුව ඔබ පිටාර ගැලීම: සැඟවුණු, පිටාර ගැලීම: අනුචලනය, හෝ පිටාර ගැලීම: මූලද්රව්යයක් මත ස්වයංක්රීයව සැකසූ විට, බ්රවුසරය නිරපේක්ෂ ස්ථානගත වූ පැවත එන්නන් ඇතුළුව එහි සීමාවෙන් ඔබ්බට විහිදෙන ඕනෑම දෙයක් ක්ලිප් කරයි. .scroll-container { පිටාර ගැලීම: auto; උස: 300px; /* මෙය පහත වැටීම ක්ලිප් කරයි, සම්පූර්ණ නැවතුම */ }
.dropdown { තනතුර: නිරපේක්ෂ; /* කමක් නැත -- තවමත් .scroll-container මගින් කපා ඇත */ }
මම පළමු වතාවට එයට දිව ගිය විට එය මා පුදුමයට පත් කළේය. මම ස්ථාවරය උපකල්පනය කළෙමි: නිරපේක්ෂ මූලද්රව්යයකට කන්ටේනරයක කැපීමෙන් ගැලවීමට ඉඩ සලසයි. එය නොවේ. ප්රායෝගිකව, එයින් අදහස් වන්නේ, එම ආදිතමයා මෙනුවේ අඩංගු බ්ලොක් එක නොවුනත්, නොපෙනෙන පිටාර ගැලීමේ අගයක් ඇති ඕනෑම මුතුන්මිත්තෙකුට නිරපේක්ෂ ස්ථානගත මෙනුවක් කපා දැමිය හැකි බවයි. ක්ලිප් කිරීම සහ ස්ථානගත කිරීම වෙනම පද්ධති වේ. ඔබ දෙකම තේරුම් ගන්නා තෙක් ඒවා සම්පූර්ණයෙන්ම අහඹු ලෙස පෙනෙන ආකාරයෙන් ගැටීම සිදුවේ.
CreatePortal භාවිතා කරන ප්රතික්රියා උදාහරණයක් මෙන්න:
'react-dom' වෙතින් { createPortal } ආයාත කරන්න; 'ප්රතික්රියා' වෙතින් {useState, useEffect, useRef} ආයාත කරන්න;
ශ්රිතය පහත වැටීම ({ anchorRef, isOpen, ළමයි }) { const [ස්ථානය, setPosition] = useState ({ඉහළ: 0, වම: 0});
useEffect(() => { නම් (isOpen && anchorRef.current) { const rect = anchorRef.current.getBoundingClientRect(); පිහිටුම ({ ඉහළ: rect.bottom + window.scrollY, වම්: rect.left + window.scrollX, }); } }, [isOpen, anchorRef]);
(! isOpen) ආපසු null නම්;
ආපසු createPortal(
තවද, ඇත්ත වශයෙන්ම, අපට ප්රවේශය නොසලකා හැරිය නොහැක. අන්තර්ගතය මත දිස්වන ස්ථාවර මූලද්රව්ය තවමත් යතුරු පුවරුවට ළඟා විය හැකි විය යුතුය. නාභිගත කිරීමේ අනුපිළිවෙල ස්වාභාවිකවම ස්ථාවර පතන වෙත නොයන්නේ නම්, ඔබට එය කේතය භාවිතයෙන් කළමනාකරණය කිරීමට අවශ්ය වනු ඇත. එය ඉවත දැමීමට ක්රමයක් නොමැතිව වෙනත් අන්තර්ක්රියාකාරී අන්තර්ගතයන් මත හිඳින්නේ නැති බව ද පරීක්ෂා කිරීම වටී. එය යතුරුපුවරු පරීක්ෂාවේදී ඔබව දෂ්ට කරයි. CSS නැංගුරම් ස්ථානගත කිරීම: මෙය ගමන් කරන්නේ කොහේදැයි මම සිතමි CSS Anchor Positioning යනු මා දැන් වඩාත් උනන්දු වන දිශාවයි. මම එය මුලින්ම බැලූ විට පිරිවිතරයෙන් කොපමණ ප්රමාණයක් භාවිතා කළ හැකිදැයි මට විශ්වාස නැත. පහත වැටීමක් සහ එහි ප්රේරකය අතර සම්බන්ධතාවය කෙලින්ම CSS තුළ ප්රකාශ කිරීමට එය ඔබට ඉඩ සලසයි, සහ බ්රවුසරය ඛණ්ඩාංක හසුරුවයි. .ප්රේරකය { anchor-name: --my-trigger; }
.dropdown-menu { තනතුර: නිරපේක්ෂ; ස්ථානය-නැංගුරම: --my-trigger; ඉහළ: නැංගුරම (පහළ); වම්: නැංගුරම (වම); ස්ථාන-උත්සාහ-ඇල්බැක්: flip-block, flip-inline; }
ස්ථාන-උත්සාහ-ඇල්බැක් දේපල මෙය අතින් ගණනය කිරීමකින් භාවිතා කිරීම වටී. බ්රවුසරය අත්හැරීමට පෙර විකල්ප ස්ථානගත කිරීම් උත්සාහ කරයි, එබැවින් දර්ශන තොටේ පහළින් ඇති පතන කපා හැරීම වෙනුවට ස්වයංක්රීයව ඉහළට පෙරළේ. Chromium මත පදනම් වූ බ්රවුසරවල බ්රවුසර සහාය ශක්තිමත් වන අතර Safari හි වර්ධනය වේ. Firefox වලට polyfill එකක් අවශ්යයි. @oddbird/css-anchor-positioning පැකේජය මූලික පිරිවිතර ආවරණය කරයි. මා බලාපොරොත්තු නොවූ පසුබැසීමක් අවශ්ය වන පිරිසැලසුම් දාර අවස්ථා මා විසින් ලබාගෙන ඇත, එබැවින් එය ප්රගතිශීලී වැඩිදියුණු කිරීමක් ලෙස සලකන්න හෝ එය සමඟ යුගල කරන්නFirefox සඳහා JavaScript පසුබැසීම. කෙටියෙන් කිවහොත්, පොරොන්දු වූ නමුත් තවමත් විශ්වීය නොවේ. ඔබගේ ඉලක්ක බ්රවුසර වල පරීක්ෂා කරන්න. ප්රවේශ්යතාව සම්බන්ධයෙන් ගත් කල, CSS හි දෘශ්ය සම්බන්ධතාවයක් ප්රකාශ කිරීම ප්රවේශ්යතා ගසට කිසිවක් නොකියයි. aria-controls, aria-expanded, aria-haspopup — එම කොටස තවමත් ඔබ මත පවතී. සමහර විට නිවැරදි කිරීම මූලද්රව්ය චලනය කරයි ද්වාරයකට ළඟා වීමට හෝ ඛණ්ඩාංක ගණනය කිරීම් කිරීමට පෙර, මම සෑම විටම එක් ප්රශ්නයක් පළමුවෙන් අසමි: මෙම පතනය සැබවින්ම අනුචලන කන්ටේනරය තුළ ජීවත් වීමට අවශ්යද? එය සිදු නොවන්නේ නම්, ජාවාස්ක්රිප්ට් සහ ඛණ්ඩාංක ගණනය කිරීම් නොමැතිව, ඉහළ මට්ටමේ දවටනයක් වෙත සලකුණු කිරීම ගැටළුව සම්පූර්ණයෙන්ම ඉවත් කරයි. මෙය සැමවිටම කළ නොහැකි ය. බොත්තම සහ පතනය එකම සංරචකය තුළ සංග්රහ කර ඇත්නම්, එකක් අනෙකකින් තොරව ගෙන යාමෙන් අදහස් වන්නේ සම්පූර්ණ API ගැන නැවත සිතා බැලීමයි. නමුත් ඔබට එය කළ හැකි විට, දෝෂහරණය කිරීමට කිසිවක් නැත. ගැටලුව හුදෙක් නොපවතියි. නවීන CSS තවමත් විසඳන්නේ නැති දේ CSS මෙහි බොහෝ දුර පැමිණ ඇත, නමුත් එය ඔබව පහත් කරන ස්ථාන තවමත් තිබේ. තනතුර: ස්ථාවර සහ පරිවර්තන ගැටළු තවමත් පවතී. එය හිතාමතාම පිරිවිතරයේ ඇත, එයින් අදහස් කරන්නේ CSS ක්රියාමාර්ගයක් නොමැති බවයි. ඔබ ඔබේ පිරිසැලසුම පරිවර්තනය කරන ලද මූලද්රව්යයකින් ඔතා සජීවිකරණ පුස්තකාලයක් භාවිතා කරන්නේ නම්, ඔබට ද්වාර හෝ නැංගුරම් ස්ථානගත කිරීම අවශ්ය වේ. CSS ඇන්කර් ස්ථානගත කිරීම පොරොන්දු වේ, නමුත් අලුත්. කලින් සඳහන් කළ පරිදි, මම මෙය ලියන අවස්ථාවේ ෆයර්ෆොක්ස් හට තවමත් බහු පිරවුමක් අවශ්ය වේ. මම බලාපොරොත්තු නොවූ පසුබැසීමක් අවශ්ය වන පිරිසැලසුම් දාර නඩු වලට මම පහර දුන්නෙමි. ඔබට අද සියලුම බ්රව්සර් හරහා ස්ථාවර හැසිරීමක් අවශ්ය නම්, ඔබ තවමත් උපක්රමශීලී කොටස් සඳහා JavaScript වෙත ළඟා වේ. මම ඇත්ත වශයෙන්ම මගේ කාර්ය ප්රවාහය වෙනස් කර ඇති එකතු කිරීම HTML Popover API වේ, දැන් සියලුම නවීන බ්රවුසරවල තිබේ. ජාවාස්ක්රිප්ට් ස්ථානගත කිරීමක් අවශ්ය නොවී, සියල්ලට වඩා ඉහළින් බ්රවුසරයේ ඉහළ ස්ථරයේ ඇති popover ගුණාංගය සහිත මූලද්රව්ය විදැහුම්කරණය වේ.
Escape handle, dismiss-on-click-outside, සහ solid accessibility semantics මෙවලම් ඉඟි, අනාවරණ විජට් සහ සරල උඩින් ඇති දේවල් සඳහා නොමිලේ පැමිණේ. එය මම දැනට ළඟා වන පළමු මෙවලමයි. එනම්, එය ස්ථානගත කිරීම විසඳන්නේ නැත. එය ස්ථර කිරීම විසඳයි. පොපෝවර් එකක් එහි ප්රේරකයට පෙළගස්වීමට ඔබට තවමත් නැංගුරම් ස්ථානගත කිරීම හෝ ජාවාස්ක්රිප්ට් අවශ්ය වේ. Popover API ස්ථර කිරීම හසුරුවයි. ඇන්කර් ස්ථානගත කිරීම ස්ථානගත කිරීම හසුරුවයි. එකට භාවිතා කළ විට, ඒවා ඔබ කලින් පුස්තකාලයක් සඳහා ළඟා වූ බොහෝ දේ ආවරණය කරයි. ඔබේ තත්වය සඳහා තීරණාත්මක මාර්ගෝපදේශයක් මේ සියල්ල දුෂ්කර මාර්ගයෙන් පසු, මෙන්න මම දැන් තේරීම ගැන ඇත්තටම සිතන ආකාරය.
ද්වාරයක් භාවිතා කරන්න. ප්රේරකය කැදලි අනුචලන බහාලුම්වල ගැඹුරින් පවතින විට මම මෙය භාවිතා කරමි. මම වගු ක්රියා මෙනු සඳහා මෙම රටාව භාවිතා කළ අතර එය නාභිගත කිරීමේ ප්රතිසාධනය සහ ප්රවේශ්යතා පරීක්ෂාවන් සමඟ යුගල කළෙමි. එය වඩාත්ම විශ්වාසදායක විකල්පය, නමුත් අතිරේක රැහැන් සඳහා අයවැය කාලය. ස්ථාවර ස්ථානගත කිරීම භාවිතා කරන්න.මෙය ඔබ වැනිලා ජාවාස්ක්රිප්ට් හෝ සැහැල්ලු රාමුවක සිටින විට වන අතර කිසිදු මුතුන්මිත්තෙකු පරිවර්තන හෝ පෙරහන් අදාළ නොවන බව සත්යාපනය කළ හැක. එම එක් සීමාවක් පවතින තාක් එය සැකසීමට සරල වන අතර දෝෂහරණය කිරීමට සරල ය. CSS Anchor Positioning භාවිතා කරන්න.ඔබේ බ්රවුසර සහාය එයට ඉඩ දෙන විට මේ සඳහා ළඟා වන්න. Firefox සහාය අවශ්ය නම්, එය @oddbird polyfill සමඟ යුගල කරන්න. වේදිකාව අවසානයේ ගමන් කරන ස්ථානය මෙය වන අතර අවසානයේ ඔබේ ප්රවේශය බවට පත්වනු ඇත. DOM ප්රතිව්යුහගත කරන්න.ගෘහ නිර්මාණ ශිල්පය එයට අවසර දෙන විට මෙය භාවිතා කරන්න, ඔබට ශුන්ය ධාවන කාල සංකීර්ණතාව අවශ්ය වේ. එය වඩාත්ම අවතක්සේරු කළ විකල්පය බව මම විශ්වාස කරමි. රටා ඒකාබද්ධ කරන්න.ඔබගේ මූලික ප්රවේශය ලෙස ඔබට නැංගුරම් ස්ථානගත කිරීම අවශ්ය වූ විට, සහාය නොදක්වන බ්රවුසර සඳහා JavaScript පසුබැසීමක් සමඟ යුගලනය කර මෙය කරන්න. හෝ සම්බන්ධීකරණ නිරවද්යතාවය සඳහා getBoundingClientRect() සමඟ යුගලනය කරන ලද DOM ස්ථානගත කිරීම සඳහා ද්වාරයක්.
නිගමනය මම මෙම දෝෂය එක වර ප්රශ්නයක් ලෙස සැලකීමට පුරුදු වී සිටියෙමි - එය ඇලවීමට සහ ඉදිරියට යාමට යමක්. නමුත් ඊට සම්බන්ධ වූ පද්ධති තුනම - පිටාර ගැලීම, සන්දර්භ ගොඩගැසීම සහ බ්ලොක් අඩංගු වීම - තේරුම් ගැනීමට තරම් කාලයක් මම එය සමඟ වාඩි වූ පසු එය අහඹු ලෙස දැනීම නතර විය. මට බිඳුණු පතනයක් දෙස බලා වගකිව යුත්තේ කුමන මුතුන් මිත්තෙකුදැයි වහාම සොයා ගත හැකිය. මම DOM කියවන ආකාරයෙහි එම මාරුව සැබෑ ඉවත්වීම විය. තනි නිවැරදි පිළිතුරක් නොමැත. මා ළඟා වූ දෙය රඳා පවතින්නේ මට කේත පදනමේ පාලනය කළ හැකි දේ මත ය: මුතුන්මිත්තන්ගේ ගස අනපේක්ෂිත වූ විට ද්වාර; එය පිරිසිදු හා සරල වූ විට ස්ථාවර ස්ථානගත කිරීම; කිසිවක් මා නතර නොකරන විට මූලද්රව්යය චලනය කිරීම; සහ දැන් නැංගුරම් ස්ථානගත කිරීම,මට පුළුවන් තැන. ඔබ කුමක් තෝරා ගැනීම අවසන් කළත්, ප්රවේශ්යතාව අවසාන පියවර ලෙස සලකන්න එපා. මගේ අත්දැකීමට අනුව, එය හරියටම මඟ හරිනු ලැබේ. ARIA සම්බන්ධතා, අවධානය යොමු කළමණාකරණය, යතුරුපුවරු හැසිරීම - ඒවා ඔප දැමීම නොවේ. ඒවා ඇත්ත වශයෙන්ම ක්රියාත්මක වන දෙයෙහි කොටසකි. මගේ GitHub repo හි සම්පූර්ණ මූල කේතය පරීක්ෂා කරන්න. වැඩිදුර කියවීම මේ හරහා වැඩ කරන අතරතුර මම නැවත පැමිණි යොමු කිරීම් මේවාය:
ගොඩගැසීමේ සන්දර්භය (MDN) "CSS ඇන්කර් ස්ථානගත කිරීමේ මාර්ගෝපදේශය", ජුවාන් ඩියාගෝ රොඩ්රිගස් "Popover API සමඟ ආරම්භ කිරීම", Godstime Aburu පාවෙන UI (floating-ui.com) CSS පිටාර ගැලීම (MDN)
