ஸ்க்ரோல் செய்யக்கூடிய கன்டெய்னருக்குள் இருக்கும் டேட்டா டேபிள் என்பது எப்பொழுதும் ஒரே மாதிரியான சூழ்நிலை. ஒவ்வொரு வரிசையிலும் ஒரு செயல் மெனு உள்ளது, திருத்து, நகல் மற்றும் நீக்கு போன்ற சில விருப்பங்களுடன் ஒரு சிறிய கீழ்தோன்றும். நீங்கள் அதை உருவாக்குகிறீர்கள், அது தனிமையில் சரியாக வேலை செய்வதாகத் தோன்றுகிறது, பின்னர் யாரோ ஒருவர் அதை அந்த உருட்டக்கூடிய பகுதிக்குள் வைத்து, விஷயங்கள் சிதைந்துவிடும். இந்த சரியான பிழையை நான் மூன்று வெவ்வேறு கோட்பேஸ்களில் பார்த்திருக்கிறேன்: கொள்கலன், ஸ்டாக் மற்றும் கட்டமைப்பு, அனைத்தும் வேறுபட்டவை. பிழை, இருப்பினும், முற்றிலும் ஒரே மாதிரியானது. டிராப் டவுன் கொள்கலனின் விளிம்பில் க்ளிப் செய்யப்படுகிறது. அல்லது தர்க்கரீதியாக அதற்குக் கீழே இருக்க வேண்டிய உள்ளடக்கத்தின் பின்னால் அது காண்பிக்கப்படும். அல்லது பயனர் ஸ்க்ரோல் செய்யும் வரை அது நன்றாக வேலை செய்கிறது, பின்னர் அது நகர்கிறது. நீங்கள் z-index ஐ அடைகிறீர்கள்: 9999. சில நேரங்களில் அது உதவுகிறது, ஆனால் மற்ற நேரங்களில் அது முற்றிலும் எதுவும் செய்யாது. அந்த முரண்பாடே ஆழமான ஒன்று நடக்கிறது என்பதற்கான முதல் துப்பு. இது மீண்டும் வருவதற்குக் காரணம், மூன்று தனித்தனி உலாவி அமைப்புகள் ஈடுபட்டுள்ளன, மேலும் பெரும்பாலான டெவலப்பர்கள் ஒவ்வொன்றையும் தனித்தனியாகப் புரிந்துகொள்கிறார்கள், ஆனால் இவை மூன்றும் மோதும்போது என்ன நடக்கும் என்பதைப் பற்றி யோசிப்பதில்லை: ஓவர்ஃப்ளோ, ஸ்டேக்கிங் சூழல்கள் மற்றும் பிளாக்குகள்.
மூன்றும் எவ்வாறு தொடர்பு கொள்கின்றன என்பதை நீங்கள் புரிந்துகொண்டவுடன், தோல்வி முறைகள் சீரற்ற உணர்வை நிறுத்துகின்றன. உண்மையில், அவை கணிக்கக்கூடியவை. மூன்று விஷயங்கள் உண்மையில் இதை ஏற்படுத்துகின்றன அந்த பொருட்கள் ஒவ்வொன்றையும் விரிவாகப் பார்ப்போம். வழிதல் பிரச்சனை ஓவர்ஃப்ளோ: மறைக்கப்பட்ட, வழிதல்: ஸ்க்ரோல் அல்லது ஓவர்ஃப்ளோ: ஒரு உறுப்பில் தானாக அமைக்கும் போது, முற்றிலும் நிலைப்படுத்தப்பட்ட சந்ததிகள் உட்பட அதன் எல்லைக்கு அப்பாற்பட்ட எதையும் உலாவி கிளிப் செய்யும். .சுருள் கொள்கலன் { வழிதல்: ஆட்டோ; உயரம்: 300px; /* இது கீழ்தோன்றும், முழு நிறுத்தத்தை கிளிப் செய்யும் */ }
.dropdown { நிலை: முழுமையான; /* பரவாயில்லை -- இன்னும் .scroll-container மூலம் கிளிப் செய்யப்பட்டது */ }
முதன்முறையாக நான் அதில் ஓடியது என்னை ஆச்சரியப்படுத்தியது. நான் நிலைப்பாட்டை ஏற்றுக்கொண்டேன்: முழுமையானது ஒரு உறுப்பு ஒரு கொள்கலனின் கிளிப்பிங்கிலிருந்து தப்பிக்க அனுமதிக்கும். அது இல்லை. நடைமுறையில், அந்த மூதாதையர் மெனுவைக் கொண்ட தொகுதியாக இல்லாவிட்டாலும், பார்க்க முடியாத வழிதல் மதிப்பைக் கொண்ட எந்த மூதாதையாலும் முற்றிலும் நிலைப்படுத்தப்பட்ட மெனுவை துண்டிக்க முடியும். கிளிப்பிங் மற்றும் பொசிஷனிங் தனி அமைப்புகள். நீங்கள் இரண்டையும் புரிந்து கொள்ளும் வரை அவை முற்றிலும் சீரற்றதாகத் தோன்றும் வழிகளில் மோதுகின்றன.
CreatePortal ஐப் பயன்படுத்தி ஒரு எதிர்வினை உதாரணம் இங்கே:
'react-dom' இலிருந்து { createPortal } ஐ இறக்குமதி செய்; 'react' இலிருந்து {useState, useEffect, useRef }ஐ இறக்குமதி செய்;
செயல்பாடு கீழ்தோன்றும்({ anchorRef, isOpen, குழந்தைகள் }) { const [நிலை, அமைநிலை] = யூஸ்ஸ்டேட்({மேல்: 0, இடது: 0});
useEffect(() => { என்றால் (isOpen && anchorRef.current) { const rect = anchorRef.current.getBoundingClientRect(); செட் பொசிஷன்({ மேல்: rect.bottom + window.scrollY, இடது: rect.left + window.scrollX, }); } }, [isOpen, anchorRef]);
என்றால் (! isOpen) பூஜ்யமாக திரும்பவும்;
ரிட்டர்ன் கிரியேட் போர்டல்(
மற்றும், நிச்சயமாக, அணுகலை நாம் புறக்கணிக்க முடியாது. உள்ளடக்கத்தின் மீது தோன்றும் நிலையான கூறுகள் இன்னும் விசைப்பலகை-அடையக்கூடியதாக இருக்க வேண்டும். ஃபோகஸ் ஆர்டர் இயல்பாகவே நிலையான கீழ்தோன்றும் இடத்திற்குச் செல்லவில்லை என்றால், குறியீட்டைப் பயன்படுத்தி அதை நிர்வகிக்க வேண்டும். இது மற்ற ஊடாடும் உள்ளடக்கத்தை நிராகரிக்க வழியின்றி உட்காரவில்லை என்பதையும் சரிபார்க்க வேண்டும். விசைப்பலகை சோதனையில் அது உங்களைக் கடிக்கிறது. CSS ஆங்கர் பொசிஷனிங்: இது எங்கு செல்கிறது என்று நான் நினைக்கிறேன் CSS ஆங்கர் பொசிஷனிங் என்பது இப்போது நான் மிகவும் ஆர்வமாக உள்ள திசையாகும். நான் முதன்முதலில் பார்த்தபோது ஸ்பெக் உண்மையில் எவ்வளவு பயன்படுத்தக்கூடியது என்று எனக்குத் தெரியவில்லை. கீழ்தோன்றும் மற்றும் அதன் தூண்டுதலுக்கு இடையேயான உறவை நேரடியாக CSS இல் அறிவிக்க இது உங்களை அனுமதிக்கிறது, மேலும் உலாவி ஆயங்களை கையாளுகிறது. .தூண்டுதல் { நங்கூரம்-பெயர்: --மை-தூண்டுதல்; }
.dropdown-menu { நிலை: முழுமையான; நிலை-நங்கூரம்: --மை-தூண்டுதல்; மேல்: நங்கூரம்(கீழே); இடது: நங்கூரம்(இடது); நிலை-முயற்சி-குறைபாடுகள்: ஃபிளிப்-பிளாக், ஃபிளிப்-இன்லைன்; }
பொசிஷன்-டிரை-ஃபால்பேக்குகள் சொத்து என்பது கையேடு கணக்கீட்டின் மூலம் இதைப் பயன்படுத்துவதை மதிப்புடையதாக்குகிறது. உலாவி கைவிடுவதற்கு முன் மாற்று இடங்களை முயற்சிக்கிறது, எனவே வியூபோர்ட்டின் கீழே உள்ள கீழ்தோன்றும் துண்டிக்கப்படுவதற்குப் பதிலாக தானாகவே மேல்நோக்கி புரட்டுகிறது. Chromium அடிப்படையிலான உலாவிகளில் உலாவி ஆதரவு உறுதியானது மற்றும் Safari இல் வளர்ந்து வருகிறது. Firefox க்கு பாலிஃபில் தேவை. @oddbird/css-anchor-positioning தொகுப்பு முக்கிய விவரக்குறிப்பை உள்ளடக்கியது. நான் எதிர்பார்க்காத பின்னடைவுகள் தேவைப்படும் லேஅவுட் எட்ஜ் கேஸ்களை நான் அடித்துள்ளேன், எனவே இதை ஒரு முற்போக்கான மேம்பாட்டாகக் கருதுங்கள் அல்லது அதனுடன் இணைக்கவும்பயர்பாக்ஸிற்கான ஜாவாஸ்கிரிப்ட் ஃபால்பேக். சுருக்கமாக, நம்பிக்கைக்குரியது ஆனால் இன்னும் உலகளாவியதாக இல்லை. உங்கள் இலக்கு உலாவிகளில் சோதிக்கவும். மேலும் அணுகல்தன்மையை பொறுத்த வரை, CSS இல் ஒரு காட்சி உறவை அறிவிப்பது அணுகல்தன்மை மரத்திற்கு எதையும் கூறாது. aria-controls, aria-expanded, aria-haspopup — அந்த பகுதி இன்னும் உங்களிடம் உள்ளது. சில நேரங்களில் பிழைத்திருத்தம் உறுப்பு நகரும் ஒரு போர்ட்டலை அடைவதற்கு முன் அல்லது ஒருங்கிணைப்பு கணக்கீடுகளை செய்வதற்கு முன், நான் எப்போதும் ஒரு கேள்வியை முதலில் கேட்கிறேன்: இந்த கீழ்தோன்றும் உண்மையில் ஸ்க்ரோல் கொள்கலனுக்குள் வாழ வேண்டுமா? அவ்வாறு இல்லையென்றால், ஜாவாஸ்கிரிப்ட் மற்றும் ஒருங்கிணைந்த கணக்கீடுகள் இல்லாமல், மார்க்அப்பை உயர்-நிலை ரேப்பருக்கு நகர்த்துவது சிக்கலை முழுவதுமாக நீக்குகிறது. இது எப்போதும் சாத்தியமில்லை. பொத்தானும் கீழிறங்கும் ஒரே பாகத்தில் இணைக்கப்பட்டிருந்தால், ஒன்றை மற்றொன்று இல்லாமல் நகர்த்துவது முழு APIயையும் மறுபரிசீலனை செய்வதாகும். ஆனால் நீங்கள் அதை செய்ய முடியும் போது, பிழைத்திருத்த எதுவும் இல்லை. பிரச்சனை மட்டும் இல்லை. என்ன நவீன CSS இன்னும் தீர்க்கவில்லை CSS இங்கு நீண்ட தூரம் வந்துவிட்டது, ஆனால் அது உங்களைத் தாழ்த்தக்கூடிய இடங்கள் இன்னும் உள்ளன. நிலை: நிலையான மற்றும் மாற்றும் சிக்கல்கள் இன்னும் உள்ளன. இது வேண்டுமென்றே விவரக்குறிப்பில் உள்ளது, அதாவது CSS தீர்வு எதுவும் இல்லை. உங்கள் தளவமைப்பை மாற்றியமைக்கப்பட்ட உறுப்புடன் இணைக்கும் அனிமேஷன் லைப்ரரியை நீங்கள் பயன்படுத்துகிறீர்கள் என்றால், நீங்கள் மீண்டும் போர்ட்டல்கள் அல்லது ஆங்கர் பொசிஷனிங் தேவைப்படுவீர்கள். CSS ஆங்கர் பொசிஷனிங் நம்பிக்கையளிக்கிறது, ஆனால் புதியது. முன்பே குறிப்பிட்டது போல, நான் இதை எழுதும் நேரத்தில் Firefox க்கு இன்னும் ஒரு பாலிஃபில் தேவை. நான் எதிர்பார்க்காத பின்னடைவுகள் தேவைப்படும் லேஅவுட் எட்ஜ் கேஸ்களை நான் அடித்துள்ளேன். இன்று எல்லா உலாவிகளிலும் உங்களுக்கு நிலையான நடத்தை தேவைப்பட்டால், தந்திரமான பகுதிகளுக்கு நீங்கள் இன்னும் ஜாவாஸ்கிரிப்டை அடைகிறீர்கள். HTML Popover APIக்காக எனது பணிப்பாய்வுகளை மாற்றியுள்ளேன், இப்போது அனைத்து நவீன உலாவிகளிலும் கிடைக்கிறது. ஜாவாஸ்கிரிப்ட் பொசிஷனிங் தேவையில்லாமல், எல்லாவற்றிற்கும் மேலாக, பாப்ஓவர் பண்புடன் கூடிய கூறுகள் உலாவியின் மேல் அடுக்கில் வழங்கப்படுகின்றன.
எஸ்கேப் ஹேண்ட்லிங், டிஸ்மிஸ்-ஆன்-கிளிக்-அவுட், மற்றும் திடமான அணுகல்தன்மை சொற்பொருள் உதவிக்குறிப்புகள், வெளிப்படுத்தல் விட்ஜெட்டுகள் மற்றும் எளிய மேலடுக்குகள் போன்றவற்றுக்கு இலவசமாக கிடைக்கும். இப்போது நான் அடையும் முதல் கருவி இதுதான். அது நிலைப்படுத்தலை தீர்க்காது என்றார். இது அடுக்குகளை தீர்க்கிறது. பாப்ஓவரை அதன் தூண்டுதலுடன் சீரமைக்க உங்களுக்கு இன்னும் ஆங்கர் பொசிஷனிங் அல்லது ஜாவாஸ்கிரிப்ட் தேவை. Popover API லேயரிங் கையாளுகிறது. நங்கூரம் பொருத்துதல் வேலைவாய்ப்பைக் கையாளுகிறது. ஒன்றாகப் பயன்படுத்தப்பட்டால், நூலகத்திற்காக நீங்கள் முன்பு செய்தவற்றில் பெரும்பாலானவற்றை அவை உள்ளடக்கும். உங்கள் சூழ்நிலைக்கு ஒரு முடிவு வழிகாட்டி இவை அனைத்தையும் கடின வழியில் கடந்து சென்ற பிறகு, இப்போது தேர்வைப் பற்றி நான் உண்மையில் எப்படி நினைக்கிறேன் என்பது இங்கே.
போர்ட்டலைப் பயன்படுத்தவும். தூண்டுதல் உள்ளமைக்கப்பட்ட உருள் கொள்கலன்களில் ஆழமாக இருக்கும்போது நான் இதைப் பயன்படுத்துவேன். டேபிள் ஆக்ஷன் மெனுக்களுக்கு இந்தப் பேட்டர்னைப் பயன்படுத்தினேன், மேலும் அதை ஃபோகஸ் ரெஸ்டோரேஷன் மற்றும் அணுகல்தன்மை சோதனைகளுடன் இணைத்தேன். இது மிகவும் நம்பகமான விருப்பம், ஆனால் கூடுதல் வயரிங் பட்ஜெட் நேரம். நிலையான பொசிஷனிங்கைப் பயன்படுத்தவும். நீங்கள் வெண்ணிலா ஜாவாஸ்கிரிப்ட் அல்லது இலகுரக கட்டமைப்பில் இருக்கும்போது, எந்த மூதாதையரும் உருமாற்றங்கள் அல்லது வடிப்பான்களைப் பயன்படுத்தவில்லை என்பதைச் சரிபார்க்க முடியும். அதை அமைப்பது எளிது மற்றும் பிழைத்திருத்தம் செய்வது எளிது, அந்த ஒரு தடை இருக்கும் வரை. CSS Anchor Positioning ஐப் பயன்படுத்தவும்.உங்கள் உலாவி ஆதரவு அனுமதிக்கும் போது இதை அடையவும். Firefox ஆதரவு தேவைப்பட்டால், @oddbird polyfill உடன் இணைக்கவும். இங்குதான் இயங்குதளம் இறுதியில் செல்கிறது மற்றும் இறுதியில் உங்கள் செல்ல வேண்டிய அணுகுமுறையாக மாறும். DOM ஐ மறுசீரமைக்கவும்.கட்டமைப்பு அனுமதிக்கும் போது இதைப் பயன்படுத்தவும், மேலும் நீங்கள் பூஜ்ஜிய இயக்க நேர சிக்கலை விரும்பினால். இது மிகவும் குறைவாக மதிப்பிடப்பட்ட விருப்பம் என்று நான் நம்புகிறேன். பேட்டர்ன்களை இணைக்கவும். ஆதரிக்கப்படாத உலாவிகளுக்கான ஜாவாஸ்கிரிப்ட் ஃபால்பேக்குடன் இணைக்கப்பட்ட ஆங்கர் பொசிஷனிங்கை உங்கள் முதன்மை அணுகுமுறையாக விரும்பினால் இதைச் செய்யுங்கள். அல்லது ஆயத் துல்லியத்திற்காக getBoundingClientRect() உடன் இணைக்கப்பட்ட DOM வேலை வாய்ப்புக்கான போர்டல்.
முடிவுரை நான் இந்தப் பிழையை ஒரே ஒரு பிரச்சினையாகக் கருதினேன் - அதைச் சரிசெய்து தொடர வேண்டிய ஒன்று. ஆனால் நான் அதனுடன் நீண்ட நேரம் அமர்ந்தவுடன், சம்பந்தப்பட்ட மூன்று அமைப்புகளையும் புரிந்து கொள்ள முடியும் - ஓவர்ஃப்ளோ கிளிப்பிங், ஸ்டேக்கிங் சூழல்கள் மற்றும் பிளாக்குகளைக் கொண்டவை - அது சீரற்றதாக உணருவதை நிறுத்தியது. நான் உடைந்த டிராப் டவுனைப் பார்த்து, எந்த மூதாதையர் பொறுப்பு என்பதை உடனடியாகக் கண்டுபிடிக்க முடிந்தது. நான் DOM ஐ எப்படிப் படித்தேன் என்பதில் அந்த மாற்றம் உண்மையானது. சரியான பதில் எதுவும் இல்லை. நான் எதை அடைந்தேன் என்பது கோட்பேஸில் நான் எதைக் கட்டுப்படுத்த முடியும் என்பதைப் பொறுத்தது: மூதாதையர் மரம் கணிக்க முடியாததாக இருக்கும்போது இணையதளங்கள்; அது சுத்தமாகவும் எளிமையாகவும் இருக்கும்போது நிலையான நிலைப்படுத்தல்; எதுவும் என்னைத் தடுக்காதபோது உறுப்பு நகர்த்துதல்; மற்றும் ஆங்கர் பொசிஷனிங் இப்போது,நான் எங்கே முடியும். நீங்கள் எதை தேர்வு செய்தாலும், அணுகல்தன்மையை கடைசி கட்டமாக கருத வேண்டாம். என் அனுபவத்தில், அது சரியாகத் தவிர்க்கப்படும். ARIA உறவுகள், ஃபோகஸ் மேனேஜ்மென்ட், கீபோர்டு நடத்தை - இவை மெருகூட்டப்பட்டவை அல்ல. காரியத்தை உண்மையில் செயல்பட வைப்பதில் அவை ஒரு பகுதியாகும். எனது கிட்ஹப் ரெப்போவில் முழு மூலக் குறியீட்டைப் பார்க்கவும். மேலும் படித்தல் இதன் மூலம் பணிபுரியும் போது நான் தொடர்ந்து வந்த குறிப்புகள் இவை:
ஸ்டாக்கிங் சூழல் (MDN) "CSS ஆங்கர் பொசிஷனிங் கையேடு", ஜுவான் டியாகோ ரோட்ரிக்ஸ் "பாபோவர் API உடன் தொடங்குதல்", காட்ஸ்டைம் அபுரு மிதக்கும் UI (floating-ui.com) CSS ஓவர்ஃப்ளோ (MDN)
