សេណារីយ៉ូគឺស្ទើរតែតែងតែដូចគ្នា ដែលជាតារាងទិន្នន័យនៅខាងក្នុងធុងដែលអាចរមូរបាន។ ជួរនីមួយៗមានម៉ឺនុយសកម្មភាព បញ្ជីទម្លាក់ចុះតូចមួយដែលមានជម្រើសមួយចំនួនដូចជា កែសម្រួល ស្ទួន និងលុប។ អ្នកសាងសង់វា វាហាក់ដូចជាដំណើរការល្អឥតខ្ចោះនៅក្នុងភាពឯកោ ហើយបន្ទាប់មកមាននរណាម្នាក់ដាក់វានៅខាងក្នុង div ដែលអាចរមូរបាន ហើយអ្វីៗក៏ដាច់។ ខ្ញុំបានឃើញកំហុសពិតប្រាកដនេះនៅក្នុង codebases បីផ្សេងគ្នា៖ កុងតឺន័រ ជង់ និងក្របខ័ណ្ឌ ខុសគ្នាទាំងអស់។ ទោះយ៉ាងណាក៏ដោយ កំហុសគឺដូចគ្នាបេះបិទទាំងស្រុង។ ការទម្លាក់ចុះត្រូវបានខ្ទាស់នៅគែមធុង។ ឬវាបង្ហាញនៅពីក្រោយខ្លឹមសារដែលគួរមានឡូជីខលនៅខាងក្រោមវា។ ឬវាដំណើរការល្អរហូតដល់អ្នកប្រើប្រាស់រមូរ ហើយបន្ទាប់មកវារសាត់។ អ្នកឈានដល់សម្រាប់សន្ទស្សន៍ z: 9999។ ពេលខ្លះវាជួយ ប៉ុន្តែពេលខ្លះវាមិនធ្វើអ្វីទាល់តែសោះ។ ភាពមិនស៊ីសង្វាក់គ្នានោះគឺជាតម្រុយដំបូងដែលថាមានអ្វីកាន់តែស៊ីជម្រៅកំពុងកើតឡើង។ ហេតុផលដែលវាបន្តត្រឡប់មកវិញគឺថាប្រព័ន្ធកម្មវិធីរុករកបីដាច់ដោយឡែកត្រូវបានពាក់ព័ន្ធ ហើយអ្នកអភិវឌ្ឍន៍ភាគច្រើនយល់អំពីបញ្ហានីមួយៗដោយខ្លួនឯង ប៉ុន្តែមិនដែលគិតអំពីអ្វីដែលកើតឡើងនៅពេលដែលទាំងបីប៉ះទង្គិចគ្នា៖ លើសចំណុះ បរិបទជង់ និងផ្ទុកប្លុក។
នៅពេលដែលអ្នកយល់ពីរបៀបដែលអ្នកទាំងបីមានអន្តរកម្ម របៀបបរាជ័យឈប់មានអារម្មណ៍ចៃដន្យ។ តាមពិតពួកគេក្លាយជាការព្យាករណ៍។ វត្ថុ ៣ យ៉ាងដែលនាំឲ្យមានការពិត សូមក្រឡេកមើលធាតុនីមួយៗដោយលំអិត។ បញ្ហាលើសចំណុះ នៅពេលអ្នកកំណត់ overflow៖ លាក់ ហៀរចេញ៖ រមូរ ឬហៀរទឹក៖ ស្វ័យប្រវត្តិនៅលើធាតុមួយ កម្មវិធីរុករកនឹងកាត់អ្វីៗដែលលាតសន្ធឹងហួសពីព្រំដែនរបស់វា រួមទាំងកូនចៅដែលមានទីតាំងពិតប្រាកដ។ .scroll-container { លើសចំណុះ៖ ស្វ័យប្រវត្តិ; កម្ពស់: 300px; /* វានឹងកាត់ការទម្លាក់ចុះ, បញ្ឈប់ពេញលេញ */ }
.ទម្លាក់ចុះ { ទីតាំង៖ ដាច់ខាត; /* មិនមានបញ្ហា -- នៅតែខ្ទាស់ដោយ .scroll-container */ }
នោះធ្វើឱ្យខ្ញុំភ្ញាក់ផ្អើលជាលើកដំបូងដែលខ្ញុំបានរត់ចូលទៅក្នុងវា។ ខ្ញុំបានសន្មត់ទីតាំង៖ ដាច់ខាតនឹងអនុញ្ញាតឱ្យធាតុមួយគេចផុតពីការច្រឹបរបស់កុងតឺន័រ។ វាមិនមែនទេ។ នៅក្នុងការអនុវត្ត នោះមានន័យថា ម៉ឺនុយដែលមានទីតាំងពិតប្រាកដអាចត្រូវបានកាត់ផ្តាច់ដោយបុព្វបុរសណាដែលមានតម្លៃលើសដែលមិនអាចមើលឃើញ ទោះបីជាបុព្វបុរសនោះមិនមែនជាប្លុកដែលមាននៅក្នុងម៉ឺនុយក៏ដោយ។ ការច្រឹបនិងទីតាំងគឺជាប្រព័ន្ធដាច់ដោយឡែក។ ពួកគេគ្រាន់តែប៉ះទង្គិចគ្នាតាមរបៀបដែលមើលទៅចៃដន្យទាំងស្រុង រហូតដល់អ្នកយល់ទាំងពីរ។
នេះជាឧទាហរណ៍ React ដោយប្រើ createPortal៖
នាំចូល { createPortal } ពី 'react-dom'; នាំចូល { useState, useEffect, useRef } ពី 'react';
មុខងារទម្លាក់ចុះ({ anchorRef, isOpen, កុមារ }) { const [ទីតាំង setPosition] = useState({ top: 0, left: 0 });
useEffect(() => { ប្រសិនបើ (isOpen && anchorRef.current) { const rect = anchorRef.current.getBoundingClientRect(); setPosition({ ខាងលើ៖ rect.bottom + window.scrollY, ឆ្វេង៖ rect.left + window.scrollX, }); } }, [isOpen, anchorRef]);
ប្រសិនបើ (!isOpen) ត្រឡប់ null;
ត្រឡប់ createPortal(
ហើយជាការពិតណាស់ យើងមិនអាចព្រងើយកន្តើយចំពោះលទ្ធភាពប្រើប្រាស់បានទេ។ ធាតុថេរដែលលេចឡើងនៅលើមាតិកាត្រូវតែនៅតែអាចចូលទៅដល់ក្តារចុចបាន។ ប្រសិនបើលំដាប់នៃការផ្តោតអារម្មណ៍មិនផ្លាស់ទីដោយធម្មជាតិទៅក្នុងបញ្ជីទម្លាក់ចុះថេរ អ្នកនឹងត្រូវគ្រប់គ្រងវាដោយប្រើកូដ។ វាក៏មានតម្លៃផងដែរក្នុងការពិនិត្យមើលថាវាមិនអង្គុយលើមាតិកាអន្តរកម្មផ្សេងទៀតដោយគ្មានវិធីដើម្បីបដិសេធវាទេ។ វាខាំអ្នកក្នុងការធ្វើតេស្តក្តារចុច។ ទីតាំងយុថ្កា CSS: កន្លែងដែលខ្ញុំគិតថានេះជាទិសដៅ CSS Anchor Positioning គឺជាទិសដៅដែលខ្ញុំចាប់អារម្មណ៍បំផុតនៅពេលនេះ។ ខ្ញុំមិនប្រាកដថាតើលក្ខណៈពិសេសនេះអាចប្រើបានប៉ុន្មានទេនៅពេលដែលខ្ញុំមើលវាដំបូង។ វាអនុញ្ញាតឱ្យអ្នកប្រកាសទំនាក់ទំនងរវាងការទម្លាក់ចុះ និងគន្លឹះរបស់វាដោយផ្ទាល់នៅក្នុង CSS ហើយកម្មវិធីរុករកតាមអ៊ីនធឺណិតគ្រប់គ្រងកូអរដោនេ។ .កេះ { ឈ្មោះយុថ្កា៖ --my-trigger; }
.dropdown-menu { ទីតាំង៖ ដាច់ខាត; ទីតាំង-យុថ្កា៖ --my-trigger; កំពូល៖ យុថ្កា (បាត); ឆ្វេង៖ យុថ្កា (ឆ្វេង); position-try-fallbacks : flip-block, flip-inline; }
លក្ខណៈសម្បត្តិទីតាំង-ព្យាយាម-ជំនួសមកវិញ គឺជាអ្វីដែលធ្វើឱ្យវាមានតម្លៃដោយប្រើការគណនាដោយដៃ។ កម្មវិធីរុករកតាមអ៊ីនធឺណិតសាកល្បងកន្លែងជំនួសមុនពេលបោះបង់ ដូច្នេះទម្លាក់ចុះនៅខាងក្រោមនៃច្រកមើលនឹងត្រឡប់ឡើងលើដោយស្វ័យប្រវត្តិជំនួសឱ្យការកាត់ផ្តាច់។ ការគាំទ្រកម្មវិធីរុករកគឺរឹងមាំនៅក្នុងកម្មវិធីរុករកដែលមានមូលដ្ឋានលើ Chromium និងរីកចម្រើននៅក្នុង Safari ។ Firefox ត្រូវការ polyfill ។ កញ្ចប់កំណត់ទីតាំង @oddbird/css-anchor គ្របដណ្តប់លើលក្ខណៈពិសេសស្នូល។ ខ្ញុំបានវាយលុកករណីគែមជាមួយវាដែលតម្រូវឱ្យមានការថយក្រោយដែលខ្ញុំមិនបានគិតទុកមុន ដូច្នេះចាត់ទុកវាជាការពង្រឹងជាលំដាប់ ឬផ្គូផ្គងវាជាមួយJavaScript fallback សម្រាប់ Firefox ។ សរុបមក ការសន្យា ប៉ុន្តែមិនទាន់មានលក្ខណៈជាសកលនៅឡើយ។ សាកល្បងនៅក្នុងកម្មវិធីរុករកគោលដៅរបស់អ្នក។ ហើយបើនិយាយពីលទ្ធភាពចូលប្រើប្រាស់វិញ ការប្រកាសទំនាក់ទំនងដែលមើលឃើញក្នុង CSS មិនប្រាប់អ្វីដែលអាចចូលប្រើប្រាស់បានទេ។ aria-controls, aria-expanded, aria-haspopup — ផ្នែកនោះនៅតែស្ថិតនៅលើអ្នក។ ពេលខ្លះការជួសជុលគឺគ្រាន់តែផ្លាស់ទីធាតុ មុនពេលទៅដល់វិបផតថល ឬធ្វើការគណនាសំរបសំរួល ខ្ញុំតែងតែសួរសំណួរមួយជាមុនសិន៖ តើការទម្លាក់ចុះនេះពិតជាត្រូវការរស់នៅក្នុងធុងរមូរមែនទេ? ប្រសិនបើវាមិនដូច្នោះទេ ការផ្លាស់ប្តូរការសម្គាល់ទៅកម្រិតខ្ពស់មួយនឹងលុបបំបាត់បញ្ហាទាំងស្រុងដោយគ្មាន JavaScript និងគ្មានការគណនាសំរបសំរួល។ នេះមិនតែងតែអាចធ្វើទៅបានទេ។ ប្រសិនបើប៊ូតុង និងទម្លាក់ចុះត្រូវបានរុំព័ទ្ធក្នុងសមាសភាគដូចគ្នា ផ្លាស់ទីមួយដោយគ្មានមធ្យោបាយផ្សេងទៀត គិតឡើងវិញ API ទាំងមូល។ ប៉ុន្តែនៅពេលដែលអ្នកអាចធ្វើបាន វាគ្មានអ្វីដែលត្រូវបំបាត់កំហុសនោះទេ។ បញ្ហាគ្រាន់តែមិនមាន។ អ្វីដែល CSS ទំនើបនៅតែមិនដោះស្រាយ CSS បានមកដល់ទីនេះយូរហើយ ប៉ុន្តែនៅតែមានកន្លែងដែលវាអនុញ្ញាតឱ្យអ្នកចុះ។ ទីតាំង៖ បញ្ហាជួសជុល និងផ្លាស់ប្តូរនៅតែមាន។ វាស្ថិតនៅក្នុងលក្ខណៈពិសេសដោយចេតនា ដែលមានន័យថាមិនមានដំណោះស្រាយ CSS ទេ។ ប្រសិនបើអ្នកកំពុងប្រើបណ្ណាល័យគំនូរជីវចលដែលរុំប្លង់របស់អ្នកនៅក្នុងធាតុដែលបានបំប្លែង នោះអ្នកត្រលប់ទៅត្រូវការផតថល ឬទីតាំងយុថ្កាវិញ។ CSS Anchor Positioning កំពុងតែជោគជ័យ ប៉ុន្តែថ្មី។ ដូចដែលបានរៀបរាប់ពីមុន Firefox នៅតែត្រូវការ polyfill នៅពេលដែលខ្ញុំកំពុងសរសេរនេះ។ ខ្ញុំបានវាយលុកករណីគែមជាមួយវាដែលតម្រូវឱ្យមានការថយក្រោយដែលខ្ញុំមិនបានរំពឹងទុក។ ប្រសិនបើអ្នកត្រូវការអាកប្បកិរិយាជាប់លាប់នៅគ្រប់កម្មវិធីរុករកទាំងអស់នៅថ្ងៃនេះ អ្នកនៅតែស្វែងរក JavaScript សម្រាប់ផ្នែកដែលមានល្បិច។ ការបន្ថែមដែលខ្ញុំពិតជាបានផ្លាស់ប្តូរដំណើរការការងាររបស់ខ្ញុំគឺ HTML Popover API ដែលឥឡូវនេះមាននៅក្នុងកម្មវិធីរុករកទំនើបទាំងអស់។ ធាតុដែលមានគុណលក្ខណៈ popover បង្ហាញនៅក្នុងស្រទាប់ខាងលើរបស់កម្មវិធីរុករកតាមអ៊ីនធឺណិត ខាងលើអ្វីៗទាំងអស់ ដោយមិនត្រូវការទីតាំង JavaScript ទេ។
ការដោះស្រាយការរត់គេច ការច្រានចោលនៅពេលចុចនៅខាងក្រៅ និងអត្ថន័យនៃលទ្ធភាពប្រើប្រាស់ដ៏រឹងមាំបានមកដោយឥតគិតថ្លៃសម្រាប់អ្វីៗដូចជាព័ត៌មានជំនួយ ធាតុក្រាហ្វិកបង្ហាញ និងការដាក់ជាន់លើសាមញ្ញ។ វាជាឧបករណ៍ដំបូងដែលខ្ញុំទៅដល់ឥឡូវនេះ។ ដែលនិយាយថាវាមិនដោះស្រាយទីតាំង។ វាដោះស្រាយស្រទាប់។ អ្នកនៅតែត្រូវការទីតាំងយុថ្កា ឬ JavaScript ដើម្បីតម្រឹម popover ទៅនឹងគន្លឹះរបស់វា។ Popover API គ្រប់គ្រងស្រទាប់។ ទីតាំងយុថ្កាគ្រប់គ្រងទីតាំង។ ប្រើជាមួយគ្នា ពួកវាគ្របដណ្តប់ភាគច្រើននៃអ្វីដែលអ្នកចង់បានពីមុនសម្រាប់បណ្ណាល័យដើម្បីធ្វើ។ ការណែនាំអំពីការសម្រេចចិត្តសម្រាប់ស្ថានភាពរបស់អ្នក។ បន្ទាប់ពីឆ្លងកាត់ផ្លូវលំបាកទាំងអស់នេះហើយ នេះជារបៀបដែលខ្ញុំពិតជាគិតអំពីជម្រើសឥឡូវនេះ។
ប្រើវិបផតថល។ ខ្ញុំនឹងប្រើវានៅពេលដែលកេះរស់នៅជ្រៅនៅក្នុងធុងរមូរដែលជាប់គាំង។ ខ្ញុំបានប្រើគំរូនេះសម្រាប់ម៉ឺនុយសកម្មភាពតារាង ហើយបានផ្គូផ្គងវាជាមួយនឹងការស្ដារការផ្តោតអារម្មណ៍ និងការត្រួតពិនិត្យលទ្ធភាពប្រើប្រាស់។ វាជាជម្រើសដែលអាចទុកចិត្តបំផុត ប៉ុន្តែពេលវេលាថវិកាសម្រាប់ខ្សែភ្លើងបន្ថែម។ ប្រើការកំណត់ទីតាំងថេរ។ នេះគឺសម្រាប់នៅពេលដែលអ្នកស្ថិតនៅក្នុង vanilla JavaScript ឬក្របខ័ណ្ឌទម្ងន់ស្រាល ហើយអាចផ្ទៀងផ្ទាត់ថាគ្មានបុព្វបុរសអនុវត្តការបំប្លែង ឬតម្រងទេ។ វាសាមញ្ញក្នុងការដំឡើង និងសាមញ្ញក្នុងការបំបាត់កំហុស ដរាបណាមានឧបសគ្គនោះ។ ប្រើ CSS Anchor Positioning.Reach សម្រាប់ការនេះ នៅពេលដែលការគាំទ្រកម្មវិធីរុករករបស់អ្នកអនុញ្ញាតវា។ ប្រសិនបើការគាំទ្រ Firefox ត្រូវបានទាមទារ សូមផ្គូផ្គងវាជាមួយ @oddbird polyfill ។ នេះគឺជាកន្លែងដែលវេទិកានេះឈានទៅដល់ទីបញ្ចប់ ហើយនឹងក្លាយទៅជាវិធីសាស្រ្តឆ្ពោះទៅរករបស់អ្នក។ រៀបចំរចនាសម្ព័ន្ធ DOM ឡើងវិញ។ ប្រើវានៅពេលដែលស្ថាបត្យកម្មអនុញ្ញាត ហើយអ្នកចង់បានភាពស្មុគស្មាញពេលដំណើរការសូន្យ។ ខ្ញុំជឿថាវាទំនងជាជម្រើសដែលមានតម្លៃទាបបំផុត។ ផ្សំលំនាំ។ ធ្វើដូចនេះនៅពេលដែលអ្នកចង់បានទីតាំងយុថ្កាជាវិធីសាស្រ្តចម្បងរបស់អ្នក ផ្គូផ្គងជាមួយ JavaScript ជំនួសសម្រាប់កម្មវិធីរុករកដែលមិនគាំទ្រ។ ឬវិបផតថលសម្រាប់ការដាក់ DOM ដែលផ្គូផ្គងជាមួយ getBoundingClientRect() សម្រាប់ភាពត្រឹមត្រូវនៃការសម្របសម្រួល។
សេចក្តីសន្និដ្ឋាន ខ្ញុំធ្លាប់ព្យាបាលកំហុសនេះជាបញ្ហាមួយ - អ្វីមួយដែលត្រូវជួសជុល និងបន្តពីនេះ។ ប៉ុន្តែនៅពេលដែលខ្ញុំអង្គុយជាមួយវាយូរល្មមដើម្បីយល់ពីប្រព័ន្ធទាំងបីដែលពាក់ព័ន្ធ — ការច្រឹបលើសចំណុះ បរិបទដាក់ជង់ និងផ្ទុកប្លុក — វាឈប់មានអារម្មណ៍ចៃដន្យ។ ខ្ញុំអាចមើលការធ្លាក់ចុះដែលខូច ហើយតាមដានភ្លាមៗថាបុព្វបុរសណាជាអ្នកទទួលខុសត្រូវ។ ការផ្លាស់ប្តូរនោះនៅក្នុងរបៀបដែលខ្ញុំអាន DOM គឺជាការទទួលយកពិតប្រាកដ។ មិនមានចម្លើយត្រឹមត្រូវតែមួយទេ។ អ្វីដែលខ្ញុំសម្រេចបានគឺអាស្រ័យលើអ្វីដែលខ្ញុំអាចគ្រប់គ្រងនៅក្នុងមូលដ្ឋានកូដ៖ ផតថលនៅពេលដែលដើមដូនតាមិនអាចទាយទុកមុនបាន។ ទីតាំងថេរនៅពេលដែលវាស្អាត និងសាមញ្ញ; ផ្លាស់ទីធាតុនៅពេលដែលគ្មានអ្វីរារាំងខ្ញុំ; និងទីតាំងយុថ្កាឥឡូវនេះកន្លែងដែលខ្ញុំអាចធ្វើបាន។ អ្វីដែលអ្នកបញ្ចប់ដោយជ្រើសរើស កុំចាត់ទុកភាពងាយស្រួលជាជំហានចុងក្រោយ។ តាមបទពិសោធន៍របស់ខ្ញុំ នោះជាពេលដែលវាត្រូវបានរំលង។ ទំនាក់ទំនង ARIA, ការគ្រប់គ្រងការផ្តោតអារម្មណ៍, ឥរិយាបថក្តារចុច — ទាំងនោះមិនមានភាពរលូនទេ។ ពួកវាជាផ្នែកនៃអ្វីដែលធ្វើឱ្យរឿងពិតដំណើរការ។ សូមពិនិត្យមើលកូដប្រភពពេញលេញនៅក្នុង GitHub repo របស់ខ្ញុំ។ ការអានបន្ថែម ទាំងនេះគឺជាឯកសារយោងដែលខ្ញុំបានបន្តត្រលប់មកវិញ ខណៈពេលដែលកំពុងធ្វើការលើបញ្ហានេះ៖
បរិបទជង់ (MDN) "ការណែនាំអំពីទីតាំងយុថ្កា CSS", Juan Diego Rodriguez "ការចាប់ផ្តើមជាមួយ Popover API", Godstime Aburu UI អណ្តែត (floating-ui.com) CSS Overflow (MDN)
