طريقة اختراق التمرير Html5

يجب أن يتم تكييف موقع الويب على الجانب المحمول بالنسبة لجوانب الويب والهواتف المحمولة، يتم استخدام حلول التخطيط المرن مثل بلوما.

تستخدم القائمة المستخدمة في H5 التفاعل الافتراضي لرسم الجدول

لعرض التفاصيل المحددة لصف واحد من البيانات في الجدول، يكون الحل المعتاد هو استخدام صفحة جديدة أو نافذة منبثقة.

يتم استخدام حل النافذة المنبثقة هنا. تفاصيل البيانات بعد النقر على صف واحد من البيانات تستخدم بطاقة Bluma المشروطة.

للحصول على تفاصيل وأمثلة محددة، يرجى الرجوع إلى: https://bulma.io/documentation/components/modal/

بعد النقر على صف واحد من البيانات، تعرض نافذة منبثقة بيانات تفصيلية، ويتم ضبط البطاقة المشروطة بالكامل على الموضع: ثابت؛

لا يوجد جزء تذييل، اضبط ارتفاع البطاقة المشروطة على ارتفاع الشاشة بأكملها: 100vh

أداء:

• عند عرضها في متصفح Chrome، تشغل البطاقة المشروطة بأكملها الشاشة بأكملها.
• شاشة الهاتف المحمول ممتلئة أيضًا، ولكن المشكلة هي أنه إذا تحركت وفقًا للإيماءة، فسيتم دفع جزء مربع البحث في المتصفح لأعلى، وفي هذا الوقت، يمكن لصفحة قائمة البيانات الموجودة أسفل النافذة المنبثقة ينزلق، وبعد ذلك سيغطي عنوان النافذة المنبثقة الجزء الأصلي من مربع البحث في المتصفح، ولكن هناك تأخير بين ذلك، يمكنك رؤية البيانات بوضوح على الصفحة أدناه
• سيكون هناك عرض آخر على الهواتف المحمولة الأخرى، إذا كانت سرعة الانزلاق سريعة نسبيًا وقمت بالتمرير مباشرة بعد ظهور النافذة المنبثقة، فسترى مساحة فارغة صغيرة في أسفل النافذة المنبثقة، وكذلك الصفحة يمكن التمرير أسفل النافذة المنبثقة وهناك تأخير واضح وعرض تمرير البيانات.

حل:

تجاوز JS + CSS: مخفي

قم بإضافة فئات CSS ديناميكيًا إلى صفحة html ضمن النافذة المنبثقة من خلال JS

 إذا ($modalButtons.length > 0) { $modalButtons.forEach(function ($el) { $el.addEventListener('click', function () { var target = $el.dataset.target; openModal(target); } );} function openModal(target) { var $target = document.getElementById(target); rootEl.classList.add('is-clipped'); $target.classList.add('is-active');}

 تم قصه { تجاوز السعة: مخفي! مهم}

عند إغلاق النافذة المنبثقة، احذف فئة CSS للصفحة من خلال JS: is-clipped

 دالة CloseModals() { rootEl.classList.remove('is-clipped'); $modals.forEach(function ($el) { $el.classList.remove('is-active'); });}

لكن بعد تجربة هذا الحل في التطبيق تبين أنه لم يحل المشكلة ومازالت المشاكل المذكورة أعلاه موجودة.

موضع JS + CSS: ثابت + التمرير للأعلى

أفكار الخطة:

1. عندما تنبثق النافذة المنبثقة، اضبط موضع html على ثابت. بعد إغلاق النافذة المنبثقة، قم بإلغاء سمة postion الخاصة بـ html.
2. نظرًا لأنه سيتم تمرير صفحة القائمة، وقد يحدث الصف الذي تم النقر عليه بعد حدوث التمرير، فيجب حساب قيمة التمرير إلى الأعلى لصفحة html نفسها.
3. لأنه بعد ضبط الموضع على ثابت عند ظهور النافذة المنبثقة، ستصبح قيمة التمرير العلوي لصفحة html 0 وتعود إلى أعلى الصفحة، لذلك، بعد إغلاق النافذة المنبثقة، تحتاج إلى تعيين القيمة يدويًا قيمة التمرير الأعلى لصفحة html للسماح لها بالتمرير إلى الموضع الأصلي لصفحة html.
4. لتحقيق التوافق، تحتاج إلى تعيين قيمة التمرير للأعلى لخصائص مختلفة

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

 constscrollTop = global.document.documentElement.scrollTop ||. global.pageYOffset ||.

أغلق النافذة المنبثقة:

 CloseModalHandler = () => { const { CloseOrderHistoryModal } = this.props; global.document.documentElement.style.position = ''; global.pageYOffset = this.scrollTop; global.document.documentElement.scrollTop = this.scrollTop; .document.body.scrollTop = this.scrollTop; CloseOrderHistoryModal();}

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.