سىنارىيە دائىم دېگۈدەك ئوخشاش بولۇپ ، ئۇ يۆتكىگىلى بولىدىغان قاچىنىڭ ئىچىدىكى سانلىق مەلۇمات جەدۋىلى. ھەر بىر قۇرنىڭ ھەرىكەت تىزىملىكى بار ، تەھرىرلەش ، كۆپەيتىش ۋە ئۆچۈرۈش قاتارلىق بىر قىسىم تاللاشلار بار. ئۇنى قۇرسىڭىز ، ئۇ يەككە ھالەتتە مۇكەممەل ئىشلەيدىغاندەك قىلىدۇ ، ئاندىن بەزىلەر ئۇنى بۇ دومىلىما دىۋنىڭ ئىچىگە قويىدۇ ۋە ئىشلار پارچىلىنىپ كېتىدۇ. مەن بۇ ئېنىق كەمتۈكنى قاچا ، دۆۋە ۋە رامكا قاتارلىق ئۈچ خىل ئوخشىمىغان كود يەشمىسىدە كۆردۈم. كەمتۈك بولسىمۇ ، پۈتۈنلەي ئوخشاش. تامچە قاچىنىڭ چېتىگە قىستۇرۇلىدۇ. ياكى ئۇ لوگىكىلىق ئاستىدا بولۇشى كېرەك بولغان مەزمۇننىڭ ئارقىسىدا كۆرۈنىدۇ. ياكى ئىشلەتكۈچى دومىلاپ بولغۇچە نورمال ئىشلەيدۇ ، ئاندىن ئۇ يۆتكىلىدۇ. سىز z- كۆرسەتكۈچكە يېتىسىز: 9999. بەزىدە ياردەم قىلىدۇ ، ئەمما باشقا ۋاقىتلاردا ئۇ ھېچ ئىش قىلمايدۇ. بۇ ماس كەلمەسلىك تېخىمۇ چوڭقۇر بىر ئىشنىڭ يۈز بېرىشىدىكى بىرىنچى يىپ ئۇچى. ئۇنىڭ قايتىپ كېلىشىدىكى سەۋەب شۇكى ، ئۈچ ئايرىم توركۆرگۈچ سىستېمىسى چېتىلىدۇ ، كۆپىنچە پروگراممېرلار ھەر بىرسىنى ئۆزلۈكىدىن چۈشىنىدۇ ، ئەمما بۇ ئۈچىنىڭ ھەممىسى سوقۇلغاندا نېمە ئىش يۈز بېرىدىغانلىقىنى ھەرگىز ئويلىمايدۇ: تولۇپ كېتىش ، مەزمۇنلارنى رەتلەش ۋە بۆلەكلەرنى ئۆز ئىچىگە ئالىدۇ.
بۇ ئۈچىنىڭ قانداق ئۆز-ئارا تەسىر كۆرسىتىدىغانلىقىنى چۈشەنگەندىن كېيىن ، مەغلۇبىيەت ھالىتى تاسادىپىي ھېس قىلىشنى توختىتىدۇ. ئەمەلىيەتتە ، ئۇلار ئالدىن پەرەز قىلغىلى بولىدۇ. بۇنى كەلتۈرۈپ چىقىرىدىغان ئۈچ ئىش ئەمەلىيەتتە بۇ تۈرلەرنىڭ ھەر بىرىنى تەپسىلىي كۆرۈپ باقايلى. ئېشىپ كېتىش مەسىلىسى تولۇپ تاشقان: يوشۇرۇن ، تولۇپ تاشقان: سىيرىلما ياكى ئېقىپ كېتىش: ئاپتوماتىك ئېلېمېنتنى تەڭشىگەندە ، توركۆرگۈچ چەكتىن ئېشىپ كەتكەن ھەرقانداق نەرسىنى ئۆز ئىچىگە ئالىدۇ ، بۇنىڭ ئىچىدە مۇتلەق ئورۇنلاشقان ئەۋلادلارمۇ بار. .scroll-ପାତ୍ର { overflow: auto; ئېگىزلىكى: 300px; / * بۇ چۈشۈشنى قىسقارتىدۇ ، تولۇق توختايدۇ * / }
.dropdown { ئورنى: مۇتلەق / * ھېچقىسى يوق - يەنىلا .scroll- كونتېينېر تەرىپىدىن كېسىۋېتىلدى * / }
بۇ مېنىڭ تۇنجى قېتىم يۈگۈرگىنىمدە مېنى ھەيران قالدۇردى. مەن ئورۇننى پەرەز قىلاتتىم: مۇتلەق ئېلېمېنتنىڭ قاچىنىڭ كېسىلىشىدىن قېچىپ كېتىدۇ. ئۇنداق ئەمەس. ئەمەلىيەتتە ، بۇ مۇتلەق ئورۇنلاشتۇرۇلغان تىزىملىكنىڭ كۆرۈنمەس ئېقىش قىممىتى بار ھەر قانداق ئەجداد تەرىپىدىن ئۈزۈلۈپ كېتىدىغانلىقىدىن دېرەك بېرىدۇ ، گەرچە بۇ ئەجداد تىزىملىكنىڭ چەكلىمىسى بولمىسىمۇ. كېسىش ۋە ئورۇن بەلگىلەش ئايرىم سىستېما. ئۇلار پەقەت ھەر ئىككىسىنى چۈشەنمىگۈچە پۈتۈنلەي تاسادىپىي كۆرۈنىدىغان ئۇسۇللار بىلەن سوقۇلۇپ كېتىدۇ.
بۇ يەردە createPortal نى ئىشلىتىپ ئەمەلىي مىسال بار:
import {createPortal} 'react-dom' دىن; import {useState, useEffect, useRef} 'reaction' دىن;
function Dropdown ({anchorRef, isOpen, بالىلار}) { const [position, setPosition] = useState ({top: 0, left: 0});
useEffect (() => { if (isOpen && anchorRef.current) { const rect = anchorRef.current.getBoundingClientRect (); setPosition ({ ئۈستى: rect.bottom + window.scrollY, left: rect.left + window.scrollX, }); } }, [isOpen, anchorRef]);
if (! isOpen) return null;
return createPortal (
ئەلۋەتتە ، بىز قولايلىقلىقنى نەزەردىن ساقىت قىلالمايمىز. مەزمۇندا كۆرۈنىدىغان مۇقىم ئېلېمېنتلار يەنىلا كۇنۇپكا تاختىسىغا يەتكىلى بولىدۇ. ئەگەر فوكۇس تەرتىپى تەبىئىي ھالدا مۇقىم چۈشۈشكە يۆتكەلمىسە ، كود ئارقىلىق ئۇنى باشقۇرۇشىڭىزغا توغرا كېلىدۇ. ئۇنىڭ باشقا ئۆز-ئارا تەسىر كۆرسىتىدىغان مەزمۇنلارنىڭ ئۈستىدە ئولتۇرمايدىغانلىقىنى تەكشۈرۈپ بېقىشقا ئەرزىيدۇ. ئۇ كۇنۇپكا تاختىسى سىنىقىدا سىزنى چىشلەيدۇ. CSS لەڭگەر ئورنى: مېنىڭچە بۇ ماڭىدۇ CSS لەڭگەر ئورۇن بەلگىلەش مەن ھازىر ئەڭ قىزىقىدىغان يۆنىلىش. مەن تۇنجى قېتىم قارىغىنىمدا بۇ جەدۋەلنىڭ زادى قانچىلىك ئىشلىتىلىدىغانلىقىنى جەزملەشتۈرەلمىدىم. ئۇ سىزگە بىۋاسىتە CSS دا چۈشۈش ۋە قوزغاتقۇچ ئوتتۇرىسىدىكى مۇناسىۋەتنى ئېلان قىلالايدۇ ، توركۆرگۈچ كوئوردېناتنى بىر تەرەپ قىلىدۇ. .trigger { لەڭگەر ئىسمى: --my-trigger; }
.dropdown-menu { ئورنى: مۇتلەق position-anchor: --my-trigger; ئۈستى: لەڭگەر (ئاستى) سول: لەڭگەر (سولدا) position-try-fallbacks: flip-block, flip-inline; }
ئورۇننى سىناپ بېقىش خۇسۇسىيىتى قولدا ھېسابلاش ئارقىلىق ئىشلىتىشكە ئەرزىيدۇ. توركۆرگۈچ ۋاز كېچىشتىن بۇرۇن باشقا ئورۇن بەلگىلەشنى سىنايدۇ ، شۇڭا كۆرۈنۈش ئېغىزىنىڭ ئاستىدىكى تامچە ئۈزۈلۈپ قېلىشنىڭ ئورنىغا ئاپتوماتىك يۇقىرىغا ئۆرلەيدۇ. تور كۆرگۈچنىڭ قوللىشى Chromium نى ئاساس قىلغان توركۆرگۈچلەردە مۇستەھكەم بولۇپ ، Safari دا ئۆسۈۋاتىدۇ. Firefox پولىفىلغا ئېھتىياجلىق. @ غەلىتە قۇش / css- لەڭگەر ئورۇن بەلگىلەش بولىقى يادرولۇق سەپلىمىنى ئۆز ئىچىگە ئالىدۇ. مەن ئۇنىڭ بىلەن ئويلاپ باقمىغان كەمتۈكلۈكلەرنى تەلەپ قىلىدىغان ئورۇنلاشتۇرۇش گىرۋەكلىرىنى ئۇردۇم ، شۇڭا ئۇنى تەدرىجىي ئىلگىرى سۈرۈش دەپ قاراڭ ياكى ئۇنى a بىلەن ماسلاشتۇرۇڭFirefox ئۈچۈن JavaScript خاتالىق. قىسقىسى ، ئۈمىدۋار ، ئەمما ئومۇمىيۈزلۈك ئەمەس. نىشانلىق توركۆرگۈدە سىناق قىلىڭ. قولايلىقلىقىغا كەلسەك ، CSS دىكى كۆرۈنۈشلۈك مۇناسىۋەتنى ئېلان قىلىش قولايلىق دەرەخكە ھېچنېمە دېمەيدۇ. aria- كونتروللار ، ئارىيە كېڭەيتىلگەن ، ئارىيە-خاسپوپ - بۇ بۆلەك يەنىلا سىزدە. بەزىدە Fix پەقەت ئېلېمېنتنى يۆتكەيدۇ بىر پورتقا يېتىش ياكى كوئوردېنات ھېسابلاشتىن بۇرۇن ، مەن ھەمىشە ئالدى بىلەن بىر سوئال سورايمەن: بۇ چۈشۈش ئەمەلىيەتتە سىيرىلما قاچىنىڭ ئىچىدە ياشاشقا ئېھتىياجلىقمۇ؟ ئەگەر ئۇنداق بولمىسا ، بەلگىنى تېخىمۇ يۇقىرى دەرىجىدىكى ئورالمىغا يۆتكەش مەسىلىنى پۈتۈنلەي يوقىتىدۇ ، JavaScript ۋە كوئوردېنات ھېسابلاش يوق. بۇ ھەمىشە مۇمكىن ئەمەس. ئەگەر كۇنۇپكا ۋە تۆۋەنلەش ئوخشاش بىر تەركىبكە مۇجەسسەملەنگەن بولسا ، بىرىنى يۆتكىمەي تۇرۇپ يۆتكەش پۈتكۈل API نى قايتا ئويلىنىشنى كۆرسىتىدۇ. ئەمما ئۇنى قىلالىسىڭىز ، ھەل قىلىدىغان نەرسە يوق. مەسىلە پەقەت مەۋجۇت ئەمەس. زامانىۋى CSS يەنىلا ھەل قىلالمايدۇ CSS بۇ يەرگە خېلى ئۇزۇن مۇساپىنى بېسىپ ئۆتتى ، ئەمما يەنىلا سىزنى چۈشۈرۈۋېتىدىغان يەرلەر بار. ئورنى: مۇقىم ۋە ئۆزگەرتىش مەسىلىسى يەنىلا مەۋجۇت. ئۇ قەستەن سەپلىمىسىدە ، يەنى CSS خىزمەت ئورنىنىڭ يوقلىقىدىن دېرەك بېرىدۇ. ئەگەر ئورۇنلاشتۇرۇشىڭىزنى ئۆزگەرتىلگەن ئېلېمېنتقا ئوراپ تۇرىدىغان كارتون كۈتۈپخانىسىنى ئىشلىتىۋاتقان بولسىڭىز ، پورت ياكى لەڭگەر ئورنىتىشقا ئېھتىياجلىق بولىسىز. CSS لەڭگەرنىڭ ئورنى ئۈمىدۋار ، ئەمما يېڭى. يۇقىرىدا دەپ ئۆتكىنىمىزدەك ، Firefox بۇنى يېزىۋاتقان ۋاقىتتا يەنىلا كۆپ مىقداردا ئېھتىياجلىق. مەن ئويلاپ باقمىغان كەمتۈكلۈكلەرنى تەلەپ قىلىدىغان ئورۇنلاشتۇرۇش قېپىغا زەربە بەردىم. ئەگەر سىز بۈگۈن بارلىق توركۆرگۈچلەردە ئىزچىل ھەرىكەتكە ئېھتىياجلىق بولسىڭىز ، يەنىلا مۇرەككەپ قىسىملار ئۈچۈن JavaScript غا يېتىسىز. مەن خىزمەت ئېقىمىمنى ئەمەلىيەتتە ئۆزگەرتكەن HTML HTML Popover API بولۇپ ، ھازىر بارلىق زامانىۋى توركۆرگۈچلەردە بار. توركۆرگۈنىڭ ئۈستۈنكى قەۋىتىدىكى popover خاسلىقى بار ئېلېمېنتلار ھەممىدىن مۇھىمى ، JavaScript ئورۇن بەلگىلەش ھاجەتسىز.
قېچىش بىر تەرەپ قىلىش ، چېكىش-چېكىش ۋە قاتتىق قولايلىق مەنىلەر قورال قوراللىرى ، ئاشكارىلاش كىچىك قورالى ۋە ئاددىي قاپلاش قاتارلىق ئىشلار ئۈچۈن ھەقسىز كېلىدۇ. بۇ مەن ھازىرغا قەدەر يەتكۈزىدىغان تۇنجى قورال. دېمەك ، ئۇ ئورۇن بەلگىلەشنى ھەل قىلالمايدۇ. ئۇ قاتلامنى ھەل قىلىدۇ. قوزغاتقۇچنى قوزغاتقۇچقا توغرىلاش ئۈچۈن يەنىلا لەڭگەر ئورنى ياكى JavaScript لازىم. Popover API قاتلامنى بىر تەرەپ قىلىدۇ. لەڭگەر ئورنى ئورۇن بەلگىلەشنى بىر تەرەپ قىلىدۇ. ئۇلار بىرلىكتە ئىشلىتىلگەن بولۇپ ، ئۇلار سىز كۈتۈپخانىغا بارماقچى بولغان ئىشلارنىڭ كۆپ قىسمىنى ئۆز ئىچىگە ئالىدۇ. ئەھۋالىڭىز ئۈچۈن قارار قوللانمىسى بۇلارنىڭ ھەممىسىنى جاپالىق باشتىن كەچۈرگەندىن كېيىن ، مەن ھازىر تاللاشنى قانداق ئويلايمەن.
بىر ئېغىزنى ئىشلىتىڭ. قوزغاتقۇچ ئۇۋىسى ئورالغان قاچىلاردا چوڭقۇر تۇرغاندا بۇنى ئىشلىتىمەن. مەن بۇ ئەندىزىنى جەدۋەل ھەرىكەت تىزىملىكى ئۈچۈن ئىشلىتىپ ، فوكۇسنى ئەسلىگە كەلتۈرۈش ۋە زىيارەت قىلىشچانلىقىنى تەكشۈرۈش بىلەن ماسلاشتۇردۇم. بۇ ئەڭ ئىشەنچلىك تاللاش ، ئەمما قوشۇمچە سىم ئۈچۈن خامچوت ۋاقتى. مۇقىم ئورۇن بەلگىلەش ئىشلىتىڭ. تەڭشەش بىر قەدەر ئاددىي ۋە ھەل قىلىش ئاددىي ، پەقەت بىرلا چەكلىمە ساقلانغاندىلا. CSS لەڭگەر ئورنىنى ئىشلىتىڭ. توركۆرگۈڭىز ياردەم بەرگەندە بۇنىڭغا يېتىڭ. ئەگەر Firefox نى قوللاشقا توغرا كەلسە ، ئۇنى @oddbird polyfill بىلەن ماسلاشتۇرۇڭ. بۇ سۇپا ئەڭ ئاخىرىدا ماڭىدىغان جاي بولۇپ ، ئاخىرىدا سىزنىڭ يېقىنلىشىدىغان يولىڭىزغا ئايلىنىدۇ. DOM نى قايتا تەشكىللەڭ. بىناكارلىق رۇخسەت بەرگەندە بۇنى ئىشلىتىڭ ، ئىجرا ۋاقتىنىڭ مۇرەككەپلىكىنى ئۈمىد قىلىسىز. ئىشىنىمەنكى ، بۇ بەلكىم ئەڭ تۆۋەن تاللاش بولۇشى مۇمكىن. ئەندىزىلەرنى بىرلەشتۈرۈڭ. لەڭگەرنىڭ ئورنىنى ئاساسلىق ئۇسۇلىڭىز قىلماقچى بولغاندا ، بۇنى قوللىمايدىغان توركۆرگۈچلەرگە JavaScript كەمتۈكلۈك بىلەن ماسلاشتۇرۇڭ. ياكى ماسلاشتۇرغۇچنىڭ توغرىلىقى ئۈچۈن getBoundingClientRect () بىلەن ماسلاشتۇرۇلغان DOM ئورۇنلاشتۇرۇش ئېغىزى.
خۇلاسە مەن بۇ كەمتۈكنى بىر قېتىملىق مەسىلە - ياماق ۋە ئىلگىرىلەيدىغان نەرسە دەپ قارايتتىم. بىراق مەن ئۇنىڭ بىلەن بىللە ئولتۇرۇپ ، تولۇپ تاشقان قىستۇرما ، مەزمۇنلارنى رەتكە تۇرغۇزۇش ۋە بۆلەكلەرنى ئۆز ئىچىگە ئالغان ئۈچ سىستېمىنىڭ ھەممىسىنى چۈشىنىشكە يېتەرلىك ئولتۇردۇم. مەن بۇزۇلغان تامغا قاراپ ، قايسى ئەجدادلارنىڭ جاۋابكارلىقىنى دەرھال ئىز قوغلىيالايتتىم. مېنىڭ DOM نى قانداق ئوقۇغانلىقىمدىكى بۇ ئۆزگىرىش ھەقىقىي چىقىش يولى ئىدى. توغرا جاۋاب يوق. مېنىڭ ئېرىشكىنىم كود يەشكۈچتە كونترول قىلالايدىغىنىمغا باغلىق: ئەجداد دەرىخىنى مۆلچەرلىگىلى بولمايدىغان پورتلار پاكىز ۋە ئاددىي بولغاندا مۇقىم ئورۇن بەلگىلەش ھېچ نەرسە مېنى توسىمىغان ۋاقىتتا ئېلېمېنتنى يۆتكەش ۋە لەڭگەرنىڭ ئورنى ھازىر ،مەن قەيەردە. نېمىنى تاللىسىڭىز ، زىيارەتنى ئاخىرقى باسقۇچ دەپ قارىماڭ. مېنىڭ تەجرىبەمگە ئاساسلانغاندا ، ئۇ ئاتلاپ ئۆتۈپ كەتكەندە. ARIA مۇناسىۋىتى ، فوكۇس باشقۇرۇش ، كۇنۇپكا تاختىسىنىڭ ھەرىكىتى - بۇلار سىلىق ئەمەس. ئۇلار بۇ ئىشنى ئەمەلىيەتتە قىلىدىغان ئىشلارنىڭ بىر قىسمى. مېنىڭ GitHub ئامبىرىمدىكى تولۇق كودنى تەكشۈرۈپ بېقىڭ. داۋاملىق ئوقۇش بۇلارنى ئىشلەش جەريانىدا مەن داۋاملىق قايتىپ كەلگەن پايدىلانمىلار:
تىزىش مەزمۇنى (MDN) «CSS لەڭگەر ئورۇن بەلگىلەش قوللانمىسى» ، خۇان دىياگو رودرىگۇز «Popover API دىن باشلاش» ، Godstime Aburu لەيلىمە UI (floating-ui.com) CSS ئېشىپ كېتىش (MDN)
