እቲ ስናርዮ ዳርጋ ኩሉ ግዜ ሓደ እዩ፣ እዚ ድማ ኣብ ውሽጢ ስክሮል ዝግበረሉ መትሓዚ ዝርከብ ዳታ ሰንጠረዥ እዩ። ነፍሲ ወከፍ መስርዕ ናይ ተግባር ዝርዝር ኣለዎ፣ ንእሽቶ ንቑልቁል ዝወርድ ገለ ኣማራጺታት ዘለዎ፣ ከም ኣርትዖት፣ ምድግጋምን ምድምሳስን። ንስኻ ትሃንጾ፡ ብተነጽሎ ፍጹም ዝሰርሕ ይመስል፡ ድሕሪኡ ሓደ ሰብ ኣብ ውሽጢ እታ scrollable div ኣእትዩ ነገራት ይፈርሱ። እዚ ልክዕ ስሕተት’ዚ ኣብ ሰለስተ ዝተፈላለዩ ኮድቤዝ ርእየዮ’የ፡ እቲ ኮንተይነር፡ እቲ ስታክን እቲ ፍሬምዎርክን፡ ኩሎም ዝተፈላለዩ። እቲ ባልዕ ግን ፍጹም ተመሳሳሊ እዩ። እቲ ንቑልቁል ዝወርድ ኣብ ወሰን ናይ’ቲ መትሓዚ ይቑረጽ። ወይ ድማ ብድሕሪ እቲ ብስነመጎት ትሕቲኡ ክኸውን ዝግበኦ ትሕዝቶ እዩ ዝረአ። ወይ ድማ ተጠቃሚ ክሳብ ዝስክሮል ጽቡቕ ይሰርሕ፡ ድሕሪኡ ድማ ይንሳፈፍ። You reach for z-index: 9999. ሓደ ሓደ ግዜ ይሕግዝ እዩ፡ ካልእ ግዜ ግን ፍጹም ዋላ ሓንቲ ኣይገብርን እዩ። እቲ ዘይምስምማዕ እቲ ዝዓሞቐ ነገር ይፍጸም ከምዘሎ ዝሕብር ቀዳማይ ፍንጪ እዩ። እቲ ብቐጻሊ ዝምለስ ምኽንያት ሰለስተ ዝተፈላለዩ ስርዓታት መርበብ ሓበሬታ ስለዝተሳተፉ እዩ፡ መብዛሕትኦም ዲቨሎፐራት ድማ ነፍሲ ወከፎም ባዕሎም ይርድእዎም እዮም ግን ሰለስቲኦም ክጋጨዉ ከለዉ እንታይ ከም ዝኸውን ፈጺሞም ኣይሓስቡን እዮም፡ ማለት ምፍሳስ፡ ምድማር ዓውደ-ጽሑፋትን ምሓዝ ብሎክን።
ሰለስቲኦም ከመይ ከም ዝራኸቡ ምስ ተረዳእካ፡ እቶም ናይ ውድቀት ሞድታት ብሃንደበት ዝስምዓካ ስምዒት የቋርጹ። ብሓቂ ክርአ ከሎ፡ ክትግምቶ ዝከኣል ይኾኑ። ብሓቂ ነዚ ዝፈጥሩ ሰለስተ ነገራት ነፍሲ ወከፍ ካብ’ቶም ነገራት ብዝርዝር ንርአ። እቲ ናይ ምፍሳስ ጸገም ኣብ ሓደ ባእታ overflow: hidden, overflow: scroll, ወይ overflow: auto ምስ እተቐምጦ፡ እቲ መርበብ ሓበሬታ ካብ ደረቱ ወጻኢ ዝዝርጋሕ ዝኾነ ነገር ክቕንጥጦ እዩ፡ እንተላይ ፍጹም ኣብ ኣቀማምጣ ዘለዎም ዘርኢ። .scroll-container { . ምፍሳስ: ኣውቶማቲክ፤ ቁመት: 300px፤ /* እዚ ነቲ ንቑልቁል ዝወርድ ክቕንጥጦ እዩ፣ ምሉእ ደውታ */ }
.ምውራድ { . መርገጺ፡ ፍጹም፤ /* ቁምነገር የብሉን -- ጌና ብ .scroll-container ተቖሪጹ */ }
እዚ ንመጀመርታ ግዜ ኣብ ዝገጠምኩሉ እዋን ኣገሪሙኒ። መርገጺ’የ ገሚተዮ ነይረ: ፍጹም ሓደ ባእታ ካብ ምቑራጽ መትሓዚ ከምልጥ ይፈቅድ። ኣይገብሮን’ዩ። ብተግባር፡ እዚ ማለት ፍጹም ኣቀማምጣ ዘለዎ ዝርዝር መግቢ ብዝኾነ ዘይርአ ምፍሳስ ዋጋ ዘለዎ ኣቦሓጎ ክቑረጽ ይኽእል’ዩ፡ ዋላ’ውን እቲ ኣቦሓጎ ናይ’ቲ ዝርዝር ዝሓዘ ብሎክ እንተዘይኮነ። ምቑራጽን ምቕማጥን ዝተፈላለዩ ስርዓታት እዮም። በቃ ኣጋጣሚ ኮይኑ ንኽልቲኡ ክሳብ እትርድኦ ፍጹም ብሃንደበት ብዝመስል መንገዲ ይጋጨዉ።
createPortal ዝጥቀም ናይ React ኣብነት እንሆ፤
ካብ 'react-dom' ምእታው { createPortal }፤ import { useState, useEffect, useRef } ካብ 'ምልላስ';
function ድሮፕዳውን({ anchorRef, isOpen, ቆልዑ }) { const [ቦታ, setPosition] = useState ({ ላዕሊ: 0, ጸጋም: 0 });
ውጽኢት ምጥቃም (() => { if (isOpen && መልህቕመወከሲ.እዋናዊ) { const rect = መልህቕመወከሲ.ህሉው.getBoundingClientRect (); ኣቀማምጣ ቦታ({ ላዕሊ: rect.bottom + መስኮት.scrollY, ጸጋም: rect.left + window.scrollX, }); } }, [isOpen, መልህቕመወከሲ]);
if (!isOpen) ባዶ ይምለስ፤
return createPortal(
ከምኡ’ውን፡ ብርግጽ፡ ተበጻሕነት ሸለል ክንብሎ ኣይንኽእልን ኢና። ኣብ ልዕሊ ትሕዝቶ ዝረኣዩ ጽኑዓት ባእታታት ሕጂ’ውን ብኪቦርድ ዝብጻሕ ክኾኑ ኣለዎም። እቲ ናይ ትኹረት ስርዓት ብተፈጥሮ ናብቲ ጽኑዕ ንቑልቁል ዘይሰጋገር እንተኾይኑ፡ ኮድ ተጠቒምካ ከተመሓድሮ ከድልየካ’ዩ። ኣብ ልዕሊ ካልእ መስተጋብራዊ ትሕዝቶ ኮፍ ከምዘይብል’ውን ምፍታሽ ይግባእ’ሞ ንዕኡ ክትነጽጎ እትኽእለሉ መንገዲ የብሉን። እታ ሓንቲ ኣብ ፈተነ ቁልፊ ሰሌዳ ትነኽሰካ። CSS Anchor Positioning: እዚ ናበይ ገጹ ይኸይድ ኣሎ ዝመስለኒ። CSS Anchor Positioning ኣብ’ዚ ሕጂ እዋን ዝያዳ ዝግደሰሉ ኣንፈት’ዩ። መጀመርታ ክርእዮ ከለኹ ክንደይ ካብ’ቲ ስፔክ ብሓቂ ኣብ ጥቕሚ ከም ዝውዕል ርግጸኛ ኣይነበርኩን። ኣብ መንጎ ሓደ ንቑልቁል ዝወርድን መበገሲኡን ዘሎ ርክብ ብቐጥታ ኣብ CSS ክትእውጅ የኽእለካ፣ እቲ መርበብ ሓበሬታ ድማ ነቶም ኮርዲኔታት ይሕዞም። .ትሪግር { . መልህቕ-ስም: --my-trigger; }
.ንቑልቁል ዝወርድ-ሜኑ { . መርገጺ፡ ፍጹም፤ position-anchor: --ናተይ-መበገሲ፤ ላዕሊ: መልህቕ(ታሕቲ)፤ ጸጋም: መልህቕ(ጸጋም)፤ position-try-fallbacks: ፍሊፕ-ብሎክ፣ ፍሊፕ-ኢንላይን፤ }
እቲ position-try-fallbacks ዝብል ንብረት ነዚ ኣብ ልዕሊ ማንዋል ስሌት ክትጥቀመሉ ዝግባእ ዝገብሮ እዩ። እቲ መርበብ ሓበሬታ ቅድሚ ተስፋ ምቑራጹ ኣማራጺ ኣቀማምጣታት ይፍትን፣ ስለዚ ኣብ ታሕቲ ናይቲ ቪውፖርት ዝርከብ ንቑልቁል ዝወርድ ኣብ ክንዲ ዝቑረጽ ብኣውቶማቲክ ንላዕሊ ይግልበጥ። ደገፍ መርበብ ሓበሬታ ኣብ ክሮሚየም መሰረት ዝገበሩ መርበብ ሓበሬታታት ጽኑዕ ኮይኑ ኣብ ሳፋሪ ድማ እናዓበየ ይኸይድ ኣሎ። ፋየርፎክስ ፖሊፊል የድልዮ። እቲ @oddbird/css-anchor-positioning ፓኬጅ ነቲ ቀንዲ ስፔክ ይሽፍኖ። ኣነ ዘይገመትክዎ ውድቀት ዝጠልቡ layout edge cases ብእኡ ወቒዐዮም ኣለኹ፣ ስለዚ ከም ገስጋሲ ምዕባይ ጌርካ ውሰዶ ወይ ምስ aጃቫስክሪፕት ፋልባክ ንፋየርፎክስ። ብሓጺሩ ተስፋ ዘለዎ ግን ከኣ ገና ኣድማሳዊ ኣይኮነን። ኣብ ዕላማ ዝገበርካዮም ዳህሰስቲ ፈትን። ከምኡ’ውን ብዛዕባ ተበጻሕነት እንተኾይኑ፡ ኣብ CSS ስእላዊ ዝምድና ምእዋጅ ነቲ ናይ ተበጻሕነት ገረብ ዋላ ሓንቲ ኣይነግሮን’ዩ። aria-controls, aria-expanded, aria-haspopup — እቲ ክፋል ገና ኣብ ልዕሌኻ ኣሎ። ሓደ ሓደ ግዜ እቲ ምእራም ነቲ ባእታ ምንቅስቓስ ጥራይ እዩ። ቅድሚ ናብ ሓደ ፖርታል ምብጻሕ ወይ ናይ ምውህሃድ ስሌታት ምግባር፡ ኩሉ ግዜ መጀመርታ ሓንቲ ሕቶ እሓትት፡ እዚ ንቑልቁል ዝወርድ ብሓቂ ኣብ ውሽጢ እቲ ስክሮል ኮንተይነር ክነብር ኣለዎ ድዩ? እንተዘይኮይኑ፡ ነቲ ማርካፕ ናብ ዝለዓለ ደረጃ መጠቕለሊ ምግዓዝ ነቲ ጸገም ምሉእ ብምሉእ የወግዶ፡ ብዘይ ጃቫስክሪፕትን ዝኾነ ናይ ምውህሃድ ስሌታትን። እዚ ኩሉ ግዜ ዝከኣል ኣይኮነን። እቲ መጠወቒን ንቑልቁል ዝወርድን ኣብ ሓደ ክፍሊ እንተተዓሺጉ፡ ነቲ ሓደ ብዘይ እቲ ካልእ ምንቅስቓስ ማለት ንብምሉኡ ኤፒኣይ ዳግማይ ምሕሳብ ማለት እዩ። ክትገብሮ ምስ እትኽእል ግን፡ ክትእርሞ ዝግበኣካ ነገር የለን። እቲ ጸገም በቃ የለን። ዘመናዊ ሲኤስኤስ ክሳብ ሕጂ ዘይፈትሖ ኣብዚ CSS ነዊሕ መንገዲ ተጓዒዙ ኣሎ፡ ግን ገና ዘሕፍረካ ቦታታት ኣሎ። እቲ መርገጺ: ዝተኣረሙን ዝቕይሩን ጉዳያት ገና ኣለዉ። ኮነ ኢልካ ኣብ spec’ዩ ዘሎ፣ እዚ ማለት ድማ ዝኾነ ናይ CSS መፍትሒ የለን። ንኣቀማምጣኻ ብዝተቐየረ ባእታ ዝጠቕልል ናይ ኣኒሜሽን ቤተ-መጻሕፍቲ ትጥቀም እንተኾንካ፡ ናብ ዘድልየካ ፖርታላት ወይ መልህቕ ምቕማጥ ተመሊስካ ኣለኻ። CSS Anchor Positioning ተስፋ ዘለዎ ኮይኑ፡ ግን ሓድሽ እዩ። ከምቲ ኣቐዲመ ዝገለጽኩዎ፡ ፋየርፎክስ ኣብ’ቲ ነዚ ዝጽሕፈሉ ዘለኹ እዋን ገና ፖሊፊል የድልዮ’ዩ። ኣነ ዘይተጸበኽዎ ውድቀት ዝሓትት layout edge cases ብእኡ ወቒዐዮ ኣለኹ። ሎሚ ኣብ መላእ ኩሎም ዳህሰስቲ ቅኑዕ ባህሪ እንተድኣ ኣድልዩካ፡ ገና ነቶም ብልሓት ዘለዎም ክፋላት ንጃቫስክሪፕት ትበጽሕ ኣለኻ። እቲ ብሓቂ ዋሕዚ ስራሐይ ዝቐየርኩሉ ተወሳኺ፡ ሕጂ ኣብ ኩሉ ዘመናዊ መርበብ ሓበሬታታት ዝርከብ HTML Popover API’ዩ። popover attribute ዘለዎም ባእታታት ኣብ ላዕለዋይ ንጣብ ናይ’ቲ መርበብ ሓበሬታ ይቕርቡ፣ ልዕሊ ኩሉ፣ ዝኾነ ናይ ጃቫስክሪፕት ኣቀማምጣ ኣየድልን።
ዝብል ጽሑፍ ኣሎ።
ኣተሓሕዛ ምህዳም፣ ኣብ ደገ ምእላይ፣ ከምኡ’ውን ጽኑዕ ተበጻሕነት ትርጉማት ንነገራት ከም መሳርሒ ምኽሪ፣ ምግላጽ ዊጀትን ቀለልቲ ምድብላቕን ብነጻ ይመጹ። ንሕጂ ዝበጽሖ ናይ መጀመርታ መሳርሒ’ዩ። እዚ ክበሃል ከሎ፡ ንኣቀማምጣ ኣይፈትሖን’ዩ። ንላየር (layering) ይፈትሕ። ሕጂ ውን ንሓደ ፖፖቨር ምስ ትሪግሩ ንምስምማዕ መልህቕ ኣቀማምጣ ወይ ጃቫስክሪፕት የድልየካ። ፖፖቨር ኤፒኣይ ነቲ ንጣር ይሕዞ። መልህቕ ምቕማጥ ነቲ ምቕማጥ ይሕዞ። ብሓባር እንተተጠቒምካሎም፡ መብዛሕትኡ ቅድሚ ሕጂ ቤተ-መጻሕፍቲ ክትገብሮ እትበጽሖ ነገራት ዝሽፍኑ’ዮም። ንኹነታትካ ዝኸውን መምርሒ ውሳነ ነዚ ኩሉ ብኸቢድ መንገዲ ድሕሪ ምሕላፈይ፡ ብሓቂ ሕጂ ብዛዕባ’ቲ ምርጫ ከመይ ከም ዝሓስቦ እንሆ።
ፖርታል ተጠቐም።እቲ ትሪግር ኣብ ዕምቆት ኣብ ዝተሰነዩ ስክሮል ኮንተይነራት ክነብር ከሎ’የ ነዚ ምተጠቐምኩሉ። ነዚ ቅዲ ንሰንጠረዥ ተግባር ምኒዩታት ተጠቒመ ምስ ፎኮስ ምሕዳስን ተበጻሕነት ምፍታሽን ኣጣሚረዮ። እቲ ዝያዳ ዘተኣማምን ኣማራጺ’ዩ፡ ግን ከኣ ንተወሳኺ ገመድ ዝኸውን ግዜ ባጀት። ጽኑዕ ኣቀማምጣ ተጠቐም።እዚ ኣብ ቫኒላ ጃቫስክሪፕት ወይ ቀሊል ፍሬምዎርክ ምስ እትህሉን ዝኾነ ኣቦሓጎ ትራንስፎርሜሽን ወይ ፍልተር ከምዘይትግብር ከረጋግጽ ዝኽእልን እዩ። ንምትካል ቀሊልን ንምእራም ቀሊልን’ዩ፣ እቲ ሓደ ደረት ክሳብ ዝሓዘ። CSS Anchor Positioning ተጠቐም።ንእዚ ድጋፍ መርበብ ሓበሬታኻ ኣብ ዝፈቕደሉ እዋን በጽሖ። ናይ ፋየርፎክስ ደገፍ እንተድኣ ኣድልዩ ምስ @oddbird polyfill ኣጣምሮ። እዚ እዩ እቲ መድረኽ ኣብ መወዳእታ ዝኸይድ ዘሎን ኣብ መወዳእታ ድማ ናትካ ክትከዶ ዝግበኣካ ኣቀራርባ ክኸውን እዩ። ንDOM ዳግማይ ውደባ።እዚ ኣርኪቴክቸር ኣብ ዝፈቕደሉ እዋን ተጠቐመሉ፣ ዜሮ ናይ ምዝዋር ግዜ ውስብስብነት ድማ ትደሊ። እቲ ዝያዳ ትሑት ደረጃ ዝወሃቦ ኣማራጺ ክኸውን ከም ዝኽእል እኣምን። ቅጥዕታት ምውህሃድ።እዚ ግበሮ መልህቕ ምቕማጥ ከም ቀንዲ ኣቀራርባኻ ምስ እትደሊ፣ ምስ ናይ ጃቫስክሪፕት ውድቀት ንዘይድገፉ ዳህሰስቲ ተጻሚዱ። ወይ ድማ ንDOM ምቕማጥ ዝኸውን ፖርታል ምስ getBoundingClientRect() ንልክዕነት ምውህሃድ ዝተጻምደ።
መደምደምታ ነዚ ባልዕ ከም ሓደ ግዜ ዝፍጸም ጉዳይ እየ ዝሕዞ ነይረ — ክትዕቅቦን ክትሰግርን ዝግበኣኒ ነገር። ሓንሳብ ግን ንሰለስቲኦም ዝሳተፉ ስርዓታት - overflow clipping, stacking contexts, and containing blocks - ንምርዳእ እኹል ግዜ ምስኣ ኮፍ ምስ በልኩ፡ ብሃንደበት ዝስምዓኒ ስምዒት ኣቋሪጹ። ዝተሰብረ ድሮፕዳውን ርእየ ብኡንብኡ ኣየናይ ኣቦሓጎ ተሓታቲ ምዃኑ ክከታተል ይኽእል ነይረ። እቲ ለውጢ ኣብ ከመይ ጌረ ንDOM ከም ዘንብቦ፡ እቲ ሓቀኛ ምውሳድ እዩ ነይሩ። ሓንቲ ቅኑዕ መልሲ’ውን የለን። እቲ ዝበጻሕክዎ ኣብቲ ኮድቤዝ ክቆጻጸሮ ዝኽእል ዝምርኮስ እዩ ነይሩ: ፖርታላት እቲ ኣቦሓጎ ገረብ ዘይግመት ኣብ ዝነበረሉ እዋን፤ ጽሩይን ቀሊልን ኣብ ዝነበረሉ እዋን ጽኑዕ ኣቀማምጣ፤ ዝዓግተኒ ነገር ኣብ ዘይነበረሉ እዋን ነቲ ባእታ ምንቅስቓስ፤ ከምኡ’ውን ኣቀማምጣ መልህቕ ሕጂ፣ኣብ ዝኽእሎ ቦታ። ኣብ መወዳእታ ዝመረጽካዮ ይኹን፡ ተበጻሕነት ከም ናይ መወዳእታ ስጉምቲ ኣይትሕሰቦ። ብተመኩሮይ ልክዕ ሽዑ’ዩ ዝዝለል። ዝምድናታት ARIA፡ ምሕደራ ትኹረት፡ ባህሪ ቁልፊ ሰሌዳ — እቶም ፖሊሽ ኣይኮኑን። ኣካል ናይ’ቲ ነቲ ነገር ብሓቂ ክሰርሕ ዝገብሮ’ዮም። ምሉእ ምንጪ ኮድ ኣብ GitHub repo ናተይ ርኣዩ። ተወሳኺ ንባብ እዚኦም እዮም እቶም ነዚ ኣቢለ እናሰራሕኩ ዝምለሶም ዝነበርኩ መወከሲታት፤
እቲ ምድማር ዓውደ-ጽሑፍ (MDN) . “መምርሒ ኣቀማምጣ መልህቕ ሲኤስኤስ”፡ ጁዋን ድየጎ ሮድሪገዝ “ምስ ፖፖቨር ኤፒኣይ ምጅማር”፡ ጎድስታይም ኣቡሩ ተንሳፋፊ UI (floating-ui.com) ሲኤስኤስ ኦቨርፍሎው (MDN)
