পৰিস্থিতি প্ৰায় সদায় একেই থাকে, যিটো এটা স্ক্ৰল কৰিব পৰা পাত্ৰৰ ভিতৰত এটা ডাটা টেবুল। প্ৰতিটো শাৰীৰ এটা কাৰ্য্য মেনু থাকে, কিছুমান বিকল্পৰ সৈতে এটা সৰু ড্ৰপডাউন, যেনে সম্পাদনা, নকল, আৰু মচি পেলাওক। আপুনি ইয়াক নিৰ্মাণ কৰে, ই পৃথকভাৱে নিখুঁতভাৱে কাম কৰা যেন লাগে, আৰু তাৰ পিছত কোনোবাই ইয়াক সেই স্ক্ৰলযোগ্য ডিভৰ ভিতৰত ৰাখে আৰু বস্তুবোৰ ছিন্নভিন্ন হৈ পৰে। মই এই সঠিক বাগটো তিনিটা ভিন্ন ক’ডবেছত দেখিছো: পাত্ৰ, ষ্টেক, আৰু ফ্ৰেমৱৰ্ক, সকলোবোৰ বেলেগ বেলেগ। বাগটো অৱশ্যে সম্পূৰ্ণ একে। ড্ৰপডাউনটো পাত্ৰৰ প্ৰান্তত ক্লিপ কৰা হয়। বা ই যুক্তিসংগতভাৱে ইয়াৰ তলত থকা উচিত বিষয়বস্তুৰ আঁৰত দেখা দিয়ে। বা ব্যৱহাৰকাৰীয়ে স্ক্ৰল নকৰালৈকে ই ভালদৰে কাম কৰে, আৰু তাৰ পিছত ই ড্ৰিফ্ট হয়। আপুনি z-index: 9999 ৰ বাবে হাত আগবঢ়ায়। কেতিয়াবা ই সহায় কৰে, কিন্তু আন কেতিয়াবা ই একেবাৰে একো নকৰে। সেই অসামঞ্জস্যতাই হৈছে গভীৰ কিবা এটা ঘটি থকাৰ প্ৰথম সূত্ৰ। ই ঘূৰি অহাৰ কাৰণটো হ'ল তিনিটা পৃথক ব্ৰাউজাৰ চিস্টেম জড়িত, আৰু বেছিভাগ ডেভেলপাৰে প্ৰতিটোকে নিজাববীয়াকৈ বুজি পায় কিন্তু তিনিওটা সংঘৰ্ষ হ'লে কি হয় সেই বিষয়ে কেতিয়াও নাভাবিব: অভাৰফ্ল', প্ৰসংগ ষ্টেকিং, আৰু ব্লক ধাৰণ কৰা।
তিনিওটাৱে কেনেকৈ পাৰস্পৰিক ক্ৰিয়া কৰে সেইটো বুজিলেই বিফলতাৰ ধৰণসমূহে যাদৃচ্ছিক অনুভৱ কৰা বন্ধ কৰি দিয়ে। আচলতে সেইবোৰ ভৱিষ্যদ্বাণীযোগ্য হৈ পৰে। আচলতে ইয়াৰ কাৰণ হোৱা তিনিটা কথা সেই প্ৰতিটো বস্তু বিতংভাৱে চাওঁ আহক। অভাৰফ্ল’ সমস্যা যেতিয়া আপুনি এটা উপাদানত অভাৰফ্ল': লুকাই থকা, অভাৰফ্ল': স্ক্ৰল, বা অভাৰফ্ল': স্বয়ংক্ৰিয় সংহতি কৰে, ব্ৰাউজাৰে ইয়াৰ সীমাৰ বাহিৰলৈ বিস্তৃত যিকোনো বস্তু ক্লিপ কৰিব, একেবাৰে অৱস্থান কৰা বংশধৰসমূহ অন্তৰ্ভুক্ত কৰি। .স্ক্ৰল-পাত্ৰ { অভাৰফ্ল': অটো; উচ্চতা: ৩০০px; /* ই ড্ৰপডাউন ক্লিপ কৰিব, সম্পূৰ্ণ ষ্টপ */ }
.ড্ৰপডাউন { অৱস্থান: নিৰপেক্ষ; /* কোনো গুৰুত্ব নাই -- এতিয়াও .scroll-container দ্বাৰা ক্লিপ কৰা হৈছে */ }
সেই কথাটোৱে মোক প্ৰথমবাৰৰ বাবে ইয়াৰ লগত মুখামুখি হোৱাৰ সময়ত আচৰিত কৰি তুলিছিল। মই অৱস্থান ধৰি লৈছিলোঁ: absolute এ এটা উপাদানক এটা পাত্ৰৰ ক্লিপিঙৰ পৰা ওলাই যাবলৈ দিব। নহয়৷ কাৰ্যক্ষেত্ৰত, তাৰ অৰ্থ হ’ল এটা একেবাৰে অৱস্থান কৰা মেনু যিকোনো পূৰ্বপুৰুষে কাটি পেলাব পাৰে যাৰ এটা অদৃশ্য অভাৰফ্ল’ মান আছে, যদিও সেই পূৰ্বপুৰুষটো মেনুৰ ধাৰণকাৰী ব্লক নহয়। ক্লিপিং আৰু পজিচনিং পৃথক ব্যৱস্থা। মাত্ৰ দুয়োটাকে বুজি নোপোৱালৈকে সম্পূৰ্ণ এৰাব নোৱাৰা যেন লগা ধৰণেৰে সংঘৰ্ষ হয়।
createPortal ব্যৱহাৰ কৰি এটা React উদাহৰণ ইয়াত দিয়া হৈছে:
'react-dom' ৰ পৰা { createPortal } আমদানি কৰক; 'প্ৰতিক্ৰিয়া'ৰ পৰা আমদানি { useState, useEffect, useRef };
ড্ৰপডাউন({ anchorRef, isOpen, সন্তান }) { const [অৱস্থান, setPosition] = useState({ ওপৰত: 0, বাওঁফালে: 0 });
useEffect(() => { যদি (isOpen && anchorRef.current) { const rect = anchorRef.current.getবাউণ্ডিংক্লায়েন্টৰেক্ট (); setPosition({ ওপৰত: rect.bottom + উইণ্ড'.স্ক্ৰ'লY, বাওঁফালে: rect.left + window.scrollX, }); } }, [isOpen, anchorRef]);
যদি (!isOpen) শূন্য ঘূৰাই দিয়ে;
ৰিটাৰ্ণ createPortal(
আৰু, অৱশ্যেই, আমি সুলভতাক আওকাণ কৰিব নোৱাৰো৷ বিষয়বস্তুৰ ওপৰত দেখা দিয়া স্থিৰ উপাদানসমূহ এতিয়াও কিবৰ্ড-প্ৰৱেশযোগ্য হ'ব লাগিব। যদি ফ’কাচ অৰ্ডাৰ স্বাভাৱিকতে ফিক্সড ড্ৰপডাউনলৈ নাযায়, আপুনি ইয়াক ক’ড ব্যৱহাৰ কৰি পৰিচালনা কৰিব লাগিব। ইয়াৰ উপৰিও পৰীক্ষা কৰাটো ভাল যে ই অন্য ইন্টাৰেক্টিভ কন্টেন্টৰ ওপৰত বহি নাথাকে আৰু ইয়াক উলাই কৰাৰ কোনো উপায় নাই৷ সেইটোৱে আপোনাক কিবৰ্ড পৰীক্ষাত কামোৰে। CSS এংকৰ পজিচনিং: মই ভাবো এইটো ক'লৈ গৈ আছে CSS Anchor Positioning হৈছে মই বৰ্তমান আটাইতকৈ আগ্ৰহী দিশটো। প্ৰথমবাৰৰ বাবে চোৱাৰ সময়ত মই নিশ্চিত নাছিলো যে স্পেকটোৰ কিমানখিনি আচলতে ব্যৱহাৰযোগ্য। ই আপোনাক এটা ড্ৰপডাউন আৰু ইয়াৰ ট্ৰিগাৰৰ মাজৰ সম্পৰ্ক পোনপটীয়াকৈ CSS ত ঘোষণা কৰিবলৈ দিয়ে, আৰু ব্ৰাউজাৰে স্থানাংকসমূহ নিয়ন্ত্ৰণ কৰে। .ট্ৰিগাৰ { anchor-name: --মোৰ-ট্ৰিগাৰ; }
.ড্ৰপডাউন-মেনু { অৱস্থান: নিৰপেক্ষ; position-anchor: --মোৰ-ট্ৰিগাৰ; ওপৰত: লংঘন(তলত); বাওঁফালে: এংকৰ(বাওঁফালে); position-try-fallbacks: ফ্লিপ-ব্লক, ফ্লিপ-ইনলাইন; }
position-try-fallbacks বৈশিষ্ট্যই ইয়াক এটা হস্তচালিত গণনাৰ ওপৰত ব্যৱহাৰ কৰাৰ যোগ্য কৰি তোলে। ব্ৰাউজাৰে হাৰ দিয়াৰ আগতে বিকল্প প্লেচমেণ্ট চেষ্টা কৰে, গতিকে ভিউপৰ্টৰ তলত এটা ড্ৰপডাউন কাটি যোৱাৰ পৰিৱৰ্তে স্বয়ংক্ৰিয়ভাৱে ওপৰলৈ উলটি যায়। ব্ৰাউজাৰ সমৰ্থন ক্ৰ'মিয়াম-ভিত্তিক ব্ৰাউজাৰত কঠিন আৰু ছাফাৰীত বৃদ্ধি পাইছে। ফায়াৰফক্সৰ বাবে এটা পলিফিলৰ প্ৰয়োজন। @oddbird/css-anchor-positioning পেকেইজে মূল স্পেক সামৰি লয়। মই ইয়াৰ সৈতে লেআউট এজ কেছসমূহ হিট কৰিছো যিবোৰৰ বাবে মই আশা নকৰা ফ’লবেকৰ প্ৰয়োজন হৈছিল, গতিকে ইয়াক এটা প্ৰগতিশীল বৃদ্ধি হিচাপে গণ্য কৰক বা ইয়াক এটাৰ সৈতে যোৰ কৰকফায়াৰফক্সৰ বাবে জাভাস্ক্রিপ্ট ফ'লবেক। মুঠতে আশাব্যঞ্জক কিন্তু এতিয়াও সাৰ্বজনীন নহয়। আপোনাৰ লক্ষ্য ব্ৰাউজাৰসমূহত পৰীক্ষা কৰক। আৰু যিমানদূৰ অভিগম্যতাৰ কথা, চি এছ এছত দৃশ্যগত সম্পৰ্ক ঘোষণা কৰিলে অভিগম্যতা গছক একো কোৱা নহয়। aria-controls, aria-expanded, aria-haspopup — সেই অংশটো এতিয়াও আপোনাৰ ওপৰত আছে। কেতিয়াবা ফিক্সটো হ’ল মাত্ৰ উপাদানটোক লৰচৰ কৰা এটা পৰ্টেললৈ যোৱাৰ আগতে বা স্থানাংক গণনা কৰাৰ আগতে, মই সদায় প্ৰথমে এটা প্ৰশ্ন সুধিছো: এই ড্ৰপডাউনটো প্ৰকৃততে স্ক্ৰল পাত্ৰৰ ভিতৰত থকাৰ প্ৰয়োজন আছেনে? যদি নহয়, মাৰ্কআপক এটা উচ্চ-স্তৰৰ ৰেপাৰলৈ স্থানান্তৰ কৰিলে সমস্যাটো সম্পূৰ্ণৰূপে নাইকিয়া হয়, কোনো জাভাস্ক্রিপ্ট আৰু কোনো স্থানাংক গণনাৰ সৈতে। এইটো সদায় সম্ভৱ নহয়৷ যদি বুটাম আৰু ড্ৰপডাউন একেটা উপাদানত এনকেপচুলেট কৰা হয়, এটাক আনটো নোহোৱাকৈ স্থানান্তৰ কৰাৰ অৰ্থ হ'ল গোটেই API পুনৰ চিন্তা কৰা। কিন্তু যেতিয়া আপুনি কৰিব পাৰিব, তেতিয়া ডিবাগ কৰিবলৈ একো নাথাকে। সমস্যাটো কেৱল নাই৷ আধুনিক চিএছএছে এতিয়াও কি সমাধান নকৰে ইয়াত CSS বহু দূৰ আগবাঢ়িছে, কিন্তু এতিয়াও এনেকুৱা ঠাই আছে য'ত ই আপোনাক নিৰাশ কৰে। অৱস্থান: ফিক্সড আৰু ট্ৰেন্সফৰ্মৰ সমস্যাবোৰ এতিয়াও আছে। ই ইচ্ছাকৃতভাৱে স্পেকত আছে, যাৰ অৰ্থ হৈছে কোনো CSS ৱৰ্কআৰউণ্ড নাই। যদি আপুনি এটা এনিমেচন লাইব্ৰেৰী ব্যৱহাৰ কৰিছে যিয়ে আপোনাৰ পৰিকল্পনাক এটা ৰূপান্তৰিত উপাদানত ৰেপ কৰে, আপুনি পৰ্টেল বা এংকৰ অৱস্থানৰ প্ৰয়োজনলৈ ঘূৰি আহিছে। CSS Anchor Positioning আশাব্যঞ্জক, কিন্তু নতুন। আগতে উল্লেখ কৰা অনুসৰি, মই এইটো লিখাৰ সময়ত Firefox-ক এতিয়াও এটা পলিফিলৰ প্ৰয়োজন। মই ইয়াৰ সৈতে লেআউট এজ কেছসমূহ হিট কৰিছো যিবোৰৰ বাবে মই ভবা নাছিলো ফ’লবেকৰ প্ৰয়োজন হৈছিল। যদি আপুনি আজি সকলো ব্ৰাউজাৰত সামঞ্জস্যপূৰ্ণ আচৰণৰ প্ৰয়োজন হয়, আপুনি এতিয়াও কৌশলী অংশসমূহৰ বাবে জাভাস্ক্রিপ্টৰ বাবে হাত আগবঢ়াইছে৷ মই প্ৰকৃততে মোৰ ৱৰ্কফ্ল’ সলনি কৰা সংযোজনটো হৈছে HTML Popover API, এতিয়া সকলো আধুনিক ব্ৰাউজাৰত উপলব্ধ৷ পপ’ভাৰ বৈশিষ্ট্য থকা উপাদানসমূহে ব্ৰাউজাৰৰ ওপৰৰ স্তৰত ৰেণ্ডাৰ কৰে, সকলোতকৈ ওপৰত, কোনো জাভাস্ক্রিপ্ট অৱস্থানৰ প্ৰয়োজন নোহোৱাকৈ।
এস্কেপ হেণ্ডলিং, ডিছমিছ-অন-ক্লিক-আউটছাইড, আৰু কঠিন অভিগম্যতা অৰ্থবিজ্ঞান সঁজুলিটিপ, প্ৰকাশ ৱিজেট, আৰু সৰল অভাৰলেৰ দৰে বস্তুৰ বাবে বিনামূলীয়াকৈ আহে। এতিয়াৰ বাবে মই হাত আগবঢ়োৱা প্ৰথম সঁজুলিটোৱেই৷ এইখিনিতে ক’ব পাৰি যে ই পজিচনিঙৰ সমাধান নকৰে৷ ই লেয়াৰিং সমাধান কৰে। এটা পপ'ভাৰক ইয়াৰ ট্ৰিগাৰৰ সৈতে প্ৰান্তিককৰণ কৰিবলে আপুনি এতিয়াও এংকৰ অৱস্থান বা জাভাস্ক্রিপ্টৰ প্ৰয়োজন। Popover API এ স্তৰসমূহ নিয়ন্ত্ৰণ কৰে। এংকৰ পজিচনিঙে প্লেচমেণ্ট চম্ভালে। একেলগে ব্যৱহাৰ কৰিলে, আপুনি আগতে লাইব্ৰেৰীয়ে কৰিবলৈ যিখিনি কাম কৰিছিল তাৰ বেছিভাগেই ইহঁতে সামৰি লয়৷ আপোনাৰ পৰিস্থিতিৰ বাবে এটা সিদ্ধান্ত গাইড এই সকলোবোৰ কঠিন পথৰ মাজেৰে যোৱাৰ পিছত, এতিয়া মই আচলতে পছন্দটোৰ বিষয়ে কেনেকৈ ভাবো।
এটা পৰ্টেল ব্যৱহাৰ কৰক। মই এইটো ব্যৱহাৰ কৰিম যেতিয়া ট্ৰিগাৰটো নেষ্টেড স্ক্ৰল পাত্ৰত গভীৰভাৱে থাকে। মই এই আৰ্হিটো টেবুল একচন মেনুসমূহৰ বাবে ব্যৱহাৰ কৰিলোঁ আৰু ইয়াক ফ'কাচ পুনৰুদ্ধাৰ আৰু অভিগম্যতা পৰীক্ষাৰ সৈতে যোৰ কৰিলোঁ। ই আটাইতকৈ নিৰ্ভৰযোগ্য বিকল্প, কিন্তু অতিৰিক্ত তাঁৰৰ বাবে সময় বাজেট কৰক৷ এইটো তেতিয়াৰ বাবে যেতিয়া আপুনি ভেনিলা জাভাস্ক্রিপ্ট বা এটা লঘু কাঠামোত থাকে আৰু কোনো পূৰ্বপুৰুষে ৰূপান্তৰ বা ফিল্টাৰ প্ৰয়োগ নকৰাটো পৰীক্ষা কৰিব নোৱাৰে। ইয়াক ছেট আপ কৰাটো সহজ আৰু ডিবাগ কৰাটো সহজ, যেতিয়ালৈকে সেই এটা বাধাই থাকে। CSS Anchor Positioning ব্যৱহাৰ কৰক। ইয়াৰ বাবে ৰিচ কৰক যেতিয়া আপোনাৰ ব্ৰাউজাৰ সমৰ্থনে ইয়াক অনুমতি দিয়ে। যদি Firefox সমৰ্থনৰ প্ৰয়োজন হয়, ইয়াক @oddbird polyfill ৰ সৈতে যোৰ কৰক । এইখিনিতে প্লেটফৰ্মটোৱে শেষত গৈ আছে আৰু শেষত আপোনাৰ গ’-টু এপ্ৰ’চ হৈ পৰিব। DOM পুনৰ্গঠন কৰক।এইটো ব্যৱহাৰ কৰক যেতিয়া স্থাপত্যই ইয়াক অনুমতি দিয়ে, আৰু আপুনি শূন্য চলনসময় জটিলতা বিচাৰে । মোৰ বিশ্বাস যে ই সম্ভৱতঃ আটাইতকৈ আণ্ডাৰৰেটেড বিকল্প৷ এইটো কৰক যেতিয়া আপুনি এংকৰ অৱস্থান আপোনাৰ প্ৰাথমিক পদ্ধতি হিচাপে বিচাৰে, সমৰ্থিত ব্ৰাউজাৰসমূহৰ বাবে এটা জাভাস্ক্রিপ্ট ফ'লবেকৰ সৈতে যোৰ কৰা। অথবা স্থানাংক সঠিকতাৰ বাবে getBoundingClientRect() ৰ সৈতে যোৰ কৰা DOM স্থানৰ বাবে এটা পৰ্টেল।
উপসংহাৰ মই এই বাগটোক এটা এবাৰৰ সমস্যা হিচাপে গণ্য কৰিছিলোঁ — পেচ কৰি আগবাঢ়ি যাবলৈ কিবা এটা। কিন্তু এবাৰ মই ইয়াৰ সৈতে জড়িত তিনিওটা চিস্টেম বুজিবলৈ যথেষ্ট সময় বহিলোঁ — অভাৰফ্ল' ক্লিপিং, প্ৰসংগ ষ্টেকিং, আৰু ব্লকসমূহ অন্তৰ্ভুক্ত কৰা — ই যাদৃচ্ছিক অনুভৱ কৰা বন্ধ কৰি দিলে। ভঙা ড্ৰপডাউন এটা চাই লগে লগে কোনজন পূৰ্বপুৰুষ দায়ী সেইটো বিচাৰি উলিয়াব পাৰিলোঁ। মই ডি অ’ এম কেনেকৈ পঢ়ো তাৰ সেই পৰিৱৰ্তনটোৱেই আছিল আচল টেক-এৱে। এটাও সঠিক উত্তৰ নাই৷ মই কি হাত আগবঢ়াইছিলো সেয়া নিৰ্ভৰ কৰিছিল ক'ডবেছত মই কি নিয়ন্ত্ৰণ কৰিব পাৰিছিলো: পৰ্টেলসমূহ যেতিয়া পূৰ্বপুৰুষৰ গছটো অভাৱনীয় আছিল; পৰিষ্কাৰ আৰু সহজ হ'লে নিৰ্দিষ্ট অৱস্থান; মোক একোৱেই বাধা নিদিয়াৰ সময়ত মৌলটোক লৰচৰ কৰা; আৰু এতিয়া এংকৰ পজিচনিং,য'ত পাৰিম। আপুনি শেষত যিয়েই নহওক কিয়, অভিগম্যতাক শেষ পদক্ষেপ হিচাপে গণ্য নকৰিব৷ মোৰ অভিজ্ঞতা অনুসৰি ঠিক সেই সময়তে ইয়াক এৰি দিয়া হয়৷ এ আৰ আই এৰ সম্পৰ্ক, ফ’কাচ মেনেজমেণ্ট, কিব’ৰ্ডৰ আচৰণ — সেইবোৰ পলিচ নহয়৷ বস্তুটোক আচলতে কাম কৰাটোৱেই তেওঁলোকৰ অংশ৷ মোৰ GitHub ৰেপোত সম্পূৰ্ণ উৎস ক'ড চাওক। অধিক পঢ়া এইবোৰৰ মাজেৰে কাম কৰি থাকোঁতে মই পুনৰ আহি থাকিল এইবোৰ উল্লেখ:
ষ্টেকিং প্ৰসংগ (MDN) “চিএছএছ এংকৰ পজিচনিং গাইড”, জুয়ান ডিয়েগো ৰড্ৰিগেজ “গেটিং ষ্টাৰ্টড উইথ দ্য পপ’ভাৰ এপিআই”, গডষ্টাইম আবুৰু ভাসমান ইউআই (floating-ui.com) CSS অভাৰফ্ল' (MDN)
