سناریو تقریبا تل ورته وي، کوم چې د سکرول وړ کانټینر دننه د معلوماتو میز دی. هر قطار د عمل مینو لري، یو کوچنی ډراپ ډاون د ځینې اختیارونو سره، لکه ایډیټ، نقل، او حذف کول. تاسو یې جوړ کړئ ، داسې بریښي چې په انزوا کې په بشپړ ډول کار کوي ، او بیا یو څوک دا د سکرول وړ ډیوی کې دننه کوي او شیان جلا کیږي. ما دا دقیق بګ په دریو مختلف کوډبیسونو کې لیدلی: کانټینر، سټیک، او چوکاټ، ټول مختلف. بګ، که څه هم، په بشپړه توګه ورته دی. ډراپ ډاؤن د کانټینر په څنډه کې کلیک کیږي. یا دا د مینځپانګې شاته ښیې چې په منطقي ډول باید لاندې وي. یا دا ښه کار کوي تر هغه چې کارن سکرول شي، او بیا یې تیریږي. تاسو د z-index: 9999 ته ورسیږئ. ځینې وختونه دا مرسته کوي، مګر ځینې وختونه دا هیڅ شی نه کوي. دا متضادیت لومړی نښه ده چې یو څه ژور پیښیږي. هغه دلیل چې دا بیرته راځي دا دی چې درې جلا براوزر سیسټمونه پکې ښکیل دي، او ډیری پراختیا کونکي هر یو پخپله پوهیږي مګر هیڅکله فکر نه کوي چې څه پیښیږي کله چې ټول درې سره ټکر شي: ډیر جریان، د سټیک کولو شرایط، او بلاکونه لري.
یوځل چې تاسو پوهیږئ چې دا درې واړه څنګه متقابل عمل کوي ، د ناکامۍ حالتونه د تصادفي احساس مخه نیسي. په حقیقت کې، دوی د وړاندوینې وړ دي. درې شیان واقعا د دې لامل کیږي راځئ چې د دغو توکو هر یو په تفصیل سره وګورو. د اوور فلو ستونزه کله چې تاسو د اوور فلو تنظیم کړئ: پټ شوی، اوور فلو: سکرول، یا اوور فلو: په یو عنصر کې اتومات، براوزر به هر هغه څه کلیک کړي چې د هغې له حدودو هاخوا پراخیږي، په شمول د بشپړ موقعیت لرونکي اولادونه. سکرول کانټینر { overflow: auto; لوړوالی: 300px؛ /* دا به د ډراپ ډاون کلپ وکړي، بشپړ تمځای */ }
. dropdown { موقف: مطلق؛ /* مهمه نده -- بیا هم د .scroll-container */ }
دا زه حیران کړم چې لومړی ځل زه دې ته ورغلم. زه به موقعیت وموم: مطلق به یو عنصر ته اجازه ورکړي چې د کانټینر کلپ کولو څخه وتښتي. دا نه کوي. په عمل کې، د دې معنی دا ده چې یو بالکل موقعیت لرونکی مینو د هر هغه پلر لخوا قطع کیدی شي چې د نه لیدل کیدونکي اوور فلو ارزښت لري، حتی که دا پلر د مینو لرونکی بلاک نه وي. کلپ کول او موقعیت کول جلا سیسټمونه دي. دوی یوازې په داسې طریقو سره ټکر کوي چې په بشپړ ډول تصادفي ښکاري تر هغه چې تاسو دواړه نه پوهیږئ.
دلته د CreatePortal په کارولو سره د عکس العمل مثال دی:
له 'react-dom' څخه { createPortal } وارد کړئ؛ واردول { useState, useEffect, useRef} له 'react' څخه؛
فنکشن ډراپ ډاون ({ anchorRef, isOpen, Children }) { const [position, setPosition] = useState({ top: 0, left: 0 });
useEffect(() => { که (isOpen && anchorRef.current) { const rect = anchorRef.current.getBoundingClientRect(); ټاکلی مقام({ پورته: rect.bottom + window.scrollY, کیڼ اړخ: rect.left + window.scrollX, }); } }, [isOpen, anchorRef]);
که (! isOpen) بیرته راستانه شي؛
بیرته راګرځیدنه جوړپورټ(
او البته، موږ نشو کولی د لاسرسي څخه سترګې پټې کړو. ثابت عناصر چې په منځپانګې کې ښکاري باید لاهم د کیبورډ د لاسرسي وړ وي. که چیرې د تمرکز امر په طبیعي ډول ټاکل شوي ډراپ ډاون ته نه ځي ، نو تاسو به د کوډ په کارولو سره دا اداره کولو ته اړتیا ولرئ. دا د کتلو ارزښت هم لري چې دا د نورو متقابل مینځپانګو په اړه نه ناست دی پرته له دې چې د دې ګوښه کولو لپاره هیڅ لاره نلري. دا یو تاسو د کیبورډ ټیسټ کې وهي. د CSS اینکر موقعیت: چیرته چې زه فکر کوم دا سرلیک دی د سی ایس ایس اینکر موقعیت هغه لار ده چې زه یې همدا اوس ډیره علاقه لرم. زه ډاډه نه وم چې څومره مشخصات واقعیا د کارولو وړ و کله چې ما لومړی ورته وکتل. دا تاسو ته اجازه درکوي په مستقیم ډول په CSS کې د ډراپ ډاون او د هغې محرک تر مینځ اړیکه اعلان کړئ ، او براوزر همغږي اداره کوي. .trigger { د لنگر نوم: --my-trigger؛ }
. dropdown-menu { موقف: مطلق؛ پوزیشن اینکر: --my-trigger؛ پورته: لنگر (لاندې)؛ بائیں: لنگر (کیڼ)؛ د پوزېشن هڅه کول: فلیپ بلاک، فلیپ انلاین؛ }
د موقعیت هڅه-فال بیک ملکیت هغه څه دي چې دا د لاسي محاسبې په کارولو سره ارزښت لري. براوزر د پریښودو دمخه د بدیل ځای پرځای کولو هڅه کوي ، نو د لید پورټ په پای کې یو ډراپ ډاون په اوتومات ډول د قطع کیدو پرځای پورته ته ځي. د براوزر ملاتړ په کرومیم میشته براوزرونو کې قوي دی او په سفاري کې وده کوي. فایرفوکس پولیفیل ته اړتیا لري. د @oddbird/css-anchor-positioning کڅوړه اصلي ځانګړتیا پوښي. ما د دې سره د ترتیب څنډې قضیې په نښه کړې چې د فال بیک بیکس ته اړتیا لري چې ما یې تمه نه درلوده ، نو دا د پرمختللې ودې په توګه چلند وکړئ یا یې د یو سره جوړه کړئد فایرفوکس لپاره جاواسکریپټ فال بیک. په لنډه توګه، ژمن خو تر اوسه نړیوال نه دی. ستاسو په نښه شوي براوزرونو کې ازموینه وکړئ. او تر هغه ځایه چې د لاسرسي پورې اړه لري ، په CSS کې د لید اړیکې اعلان کول د لاسرسي ونې ته هیڅ نه وايي. aria-controls، aria-expanded، aria-haspopup - دا برخه لاهم په تاسو کې ده. ځینې وختونه فکس یوازې عنصر حرکت کوي مخکې له دې چې پورټل ته ورسیږو یا همغږي محاسبه کول، زه تل لومړی یوه پوښتنه کوم: ایا دا ډراپ ډاون واقعیا د سکرول کانټینر دننه ژوند کولو ته اړتیا لري؟ که دا نه وي، مارک اپ د لوړې کچې ریپر ته لیږدول ستونزه په بشپړه توګه له منځه وړي، پرته له جاوا سکریپټ او نه همغږي حسابونه. دا تل ممکنه نه ده. که تڼۍ او ډراپ ډاون په ورته برخه کې ځای په ځای شوي وي، پرته له بل څخه یو حرکت کول د ټول API بیا غور کول. مګر کله چې تاسو دا کولی شئ، د ډیبګ کولو لپاره هیڅ شی شتون نلري. ستونزه یوازې شتون نلري. کوم عصري CSS لاهم حل نه کوي CSS دلته اوږده لاره راغلې، مګر لاهم داسې ځایونه شتون لري چې دا تاسو ته اجازه درکوي. دریځ: ثابت او بدلون مسلې لاهم شتون لري. دا په قصدي ډول په ځانګړتیا کې دی، پدې معنی چې د CSS هیڅ کار شتون نلري. که تاسو د انیمیشن کتابتون کاروئ چې ستاسو ترتیب په بدل شوي عنصر کې پوښي، تاسو بیرته پورټل یا لنگر موقعیت ته اړتیا لرئ. د CSS اینکر موقعیت ژمن دی، مګر نوی. لکه څنګه چې مخکې یادونه وشوه، فایرفوکس لاهم یو پولیفیل ته اړتیا لري کله چې زه دا لیکم. ما د دې سره د ترتیب څنډې قضیې په نښه کړې چې د فال بیک ته اړتیا لري چې ما یې تمه نه درلوده. که تاسو نن ورځ په ټولو براوزرونو کې دوامداره چلند ته اړتیا لرئ، تاسو لاهم د ستونزمن برخو لپاره جاواسکریپټ ته ورسیږئ. هغه اضافه چې ما په حقیقت کې زما د کاري فلو لپاره بدل کړی د HTML Popover API دی، اوس په ټولو عصري براوزرونو کې شتون لري. د پاپ اوور خاصیت سره عناصر د براوزر په پورتنۍ پرت کې وړاندې کیږي، له هرڅه پورته، د جاواسکریپټ موقعیت ته اړتیا نلري.
د تېښتې اداره کول، له منځه وړل-پر-کلک-باهر، او د لاسرسۍ قوي سیمانټیکونه د شیانو لپاره وړیا راځي لکه د اوزار ټایپ، افشا کولو ویجټونه، او ساده پوښښ. دا لومړی وسیله ده چې زه یې اوس لپاره ورسیږم. هغه وویل، دا د موقعیت حل نه کوي. دا د پرتونو حل کوي. تاسو لاهم د لنگر موقعیت یا جاواسکریپټ ته اړتیا لرئ ترڅو د دې محرک ته پاپ اوور تنظیم کړئ. د Popover API پرتونه اداره کوي. د لنگر موقعیت د ځای پرځای کولو اداره کوي. یوځای کارول کیږي، دوی ډیری هغه څه پوښي چې تاسو مخکې د کتابتون لپاره د ترسره کولو لپاره ورسیږئ. ستاسو د وضعیت لپاره د پریکړې لارښود د دې ټولو سختو لارو څخه تیریدو وروسته ، دلته دا دی چې زه واقعیا اوس د انتخاب په اړه فکر کوم.
پورټل وکاروئ زه به دا وکاروم کله چې محرک په نیست شوي سکرول کانټینرونو کې ژور ژوند کوي. ما دا نمونه د میز عمل مینو لپاره کارولې او دا د تمرکز بیا رغونې او د لاسرسي چکونو سره جوړه کړې. دا خورا معتبر انتخاب دی، مګر د اضافي تارونو لپاره د بودیجې وخت. ثابت موقعیت وکاروئ دا د دې لپاره دی کله چې تاسو په وینیلا جاوا سکریپټ یا لږ وزن لرونکي چوکاټ کې یاست او دا تصدیق کولی شئ چې هیڅ زاویه بدلون یا فلټر نه پلي کوي. دا د تنظیم کولو لپاره ساده او د ډیبګ کولو لپاره ساده دی ، تر هغه چې دا یو محدودیت ولري. د CSS اینکر موقعیت وکاروئ کله چې ستاسو د براوزر ملاتړ ورته اجازه ورکوي د دې لپاره رسي. که د فایرفوکس ملاتړ ته اړتیا وي، دا د @oddbird پولیفیل سره جوړه کړئ. دا هغه ځای دی چې پلیټ فارم په نهایت کې پرمخ ځي او په نهایت کې به ستاسو د تګ لاره شي. DOM بیا تنظیم کړئ دا هغه وخت وکاروئ کله چې جوړښت ورته اجازه ورکړي، او تاسو د صفر د وخت پیچلتیا غواړئ. زه باور لرم چې دا احتمال خورا ټیټ شوی اختیار دی. نمونې یوځای کړئ. دا کار وکړئ کله چې تاسو د خپل لومړني چلند په توګه د لنگر موقعیت غواړئ، د غیر ملاتړ شوي براوزرونو لپاره د جاواسکریپټ فال بیک سره جوړه شوې. یا د DOM ځای پرځای کولو لپاره پورټل د همغږۍ دقت لپاره getBoundingClientRect() سره جوړه شوې.
پایله ما د دې بګ سره د یو اړخیزې مسلې په توګه چلند کاوه - یو څه چې پیچ کول او حرکت کول. مګر یوځل چې زه د دې سره دومره وخت ناست وم چې په ټولو دریو سیسټمونو کې دخیل وي - د ډیر جریان کلیپینګ ، سټیکینګ شرایط ، او بلاکونه - دا د تصادفي احساس مخه ونیوله. زه کولی شم مات شوي ډراپ ته وګورم او سمدلاسه معلومه کړم چې کوم پلر مسؤل و. دا بدلون چې څنګه ما د DOM لوستلو اصلي لاره وه. هیڅ یو سم ځواب نشته. هغه څه چې زه یې ترلاسه کړم په هغه څه پورې اړه لري چې زه یې په کوډبیس کې کنټرول کولی شم: پورټلونه کله چې د لرغوني ونې اټکل نه کیده؛ ثابت موقعیت کله چې دا پاک او ساده و؛ د عنصر حرکت کول کله چې هیڅ شی زما مخه نه نیسي؛ او اوس د لنگر موقعیت،چیرته چې زه کولی شم. هر هغه څه چې تاسو یې غوره کوئ، د وروستي ګام په توګه د لاسرسي چلند مه کوئ. زما په تجربه کې، دا هغه وخت دی کله چې دا پریښودل کیږي. د ARIA اړیکې، د تمرکز مدیریت، د کیبورډ چلند - دا پالش نه دي. دوی د هغه څه برخه ده چې شی واقعیا کار کوي. زما د GitHub ریپو کې د بشپړ سرچینې کوډ وګورئ. نور لوستل دا هغه حوالې دي چې زه یې د دې له لارې کار کولو پرمهال بیرته راځم:
د سټکینګ شرایط (MDN) "د CSS اینکر د موقعیت لارښود"، جوآن ډیاګو روډریګز "د Popover API سره پیل کول"، Godstime Aburu فلوټینګ UI (floating-ui.com) CSS Overflow (MDN)
