هل سبق لك أن حاولت إنشاء قائمة منسدلة للزر الخاص بك، حدد ولكن بعد ذلك يتم حظرك بسبب إخفاء الفائض؟

إذن ماذا تفعل، حسنًا، ستصل إلى جافا سكريبت لرمي العنصر إلى جذر DOM ثم ضع العنصر بناءً على عناصر التشغيل المستقيمة، وإعادة حساب تغييرات التخطيط في كل مرة، والتمرير وتغيير حجم النافذة، وليس كثيرًا فعال.

أريد أن أبدأ بالقول إنه ليس لديه الدعم الكامل حتى الآن، ولكن هناك حل متعدد لحل هذه المشكلة في الوقت الحالي.

الميزتان الرئيسيتان اللتان سنعتمد عليهما هما

وضعية الإرساء

النوافذ المنبثقة

لذا جاءت فكرتي الأولية عندما رأيت أن مربع الحوار يتم إرساله إلى الجذر ولكن باستخدام طبقة DOM. لقد تعثرت عبر واجهة برمجة التطبيقات المنبثقة حيث تحصل بشكل أساسي على نفس المنطق ولكن تعمل بشكل مختلف قليلاً.

أتذكر أيضًا رؤية منشور حول تثبيت عنصر على الإبهام على شريط تمرير النطاق.

ثم فكرت بشكل أساسي في ما تريد القيام به لأي قائمة منسدلة/تلميح أدوات وما إلى ذلك تحتاج إلى كسر الفائض المخفي إذا قمت بخلط الاثنين فلن تحتاج إلى كل جافا سكريبت المفرط.

إليك عرضًا توضيحيًا عمليًا في المتصفحات التي تدعمه

• كروم، إيدج الإصدار 125
• أوبرا الإصدار 111
• Chrome لنظام Android، متصفح Android الإصدار 129

حسنًا، ماذا لو كنت تريد استخدامه اليوم. حسنًا، هناك حشوة متعددة لذلك يمكننا استخدامها.

الملء المتعدد لتحديد موضع الغريب/css

الذي يتمتع بدعم رائع للمتصفح

• فايرفوكس 54
• كروم 51
• الحافة 79
• سفاري 10

حاول زيارة متصفح غير مذكور في مثال غير polyfill وهذا المثال أدناه يعمل، لقد قمت شخصيًا باختبار أحدث إصدارات safari وfirefox

وهذا يعني أنه نعم في معظم المتصفحات، سيكون لدينا حمل إضافي محسوب ولكن من السهل استخدامه وإيقاف تشغيله عندما يكون لدينا توافق كافٍ.

هناك خطأ واحد في هذا الأسلوب وهو أن حجم polyfill يبلغ حوالي 92 كيلو بايت، مما سيكون له تأثير على التحميل، ولكن يمكنك تحميله ببطء بعد انتهاء التطبيق/موقع الويب من القيام بأي شيء مهم