عند إنشاء مواقع الويب ، غالبا ما يكون من الضروري فتح نافذة مشروطة تحتوي على معلومات إضافية أو نموذج لملئه. ولكن ماذا لو كان لا يزال بإمكان المستخدم تمرير الصفحة في هذا الوقت? الحل القياسي هو تعطيل التمرير عندما تكون النافذة المشروطة مفتوحة بحيث يكون التركيز بالكامل على محتويات النافذة. في هذه المقالة ، سننظر في بعض الطرق البسيطة لتنفيذ هذه الوظيفة.
الطريقة الأولى هي استخدام كس. للقيام بذلك ، قم بتطبيق الفائض: النمط المخفي على الجسم عند فتح النافذة المشروطة. وبالتالي ، سيتم تعطيل التمرير ولن يتمكن المستخدم من تمرير الصفحة. ولكن تجدر الإشارة إلى أنه قد تكون هناك مشكلة في إمكانية الوصول وقد لا تكون بعض العناصر متاحة للمستخدمين ذوي الإعاقة. لذلك ، يوصى بإضافة جوانب إيجابية باستخدام جافا سكريبت.
الطريقة الثانية هي استخدام جافا سكريبت. باستخدام لغة البرمجة هذه ، يمكنك تغيير أنماط وخصائص عناصر الصفحة ديناميكيا. على سبيل المثال ، عند فتح نافذة مشروطة ، يمكنك إضافة فئة بنمط جديد من شأنه تعطيل التمرير. هذا النهج أكثر مرونة ويجعل من السهل تخصيص سلوك النافذة المشروطة.
اعتمادا على احتياجات المشروع ومستوى التحكم المطلوب ، يمكنك اختيار إحدى الطرق المقترحة أو دمجها. من المهم أن تتذكر أنه عند تنفيذ وظيفة تعطيل التمرير ، من الضروري مراعاة إمكانية التوافق مع الإصدارات السابقة مع المتصفحات والأجهزة المختلفة.
- لماذا قد تحتاج إلى تعطيل التمرير في نافذة مشروطة
- مشاكل في التمرير عند فتح النوافذ المشروطة
- الطريقة: استخدام خاصية كس"تجاوز"
- الطريق: إضافة فئة إلى الجسم
- سؤال وجواب
- كيف يمكنني تعطيل التمرير عندما تكون النافذة المشروطة مفتوحة?
- كيف يمكنني إضافة فئة إلى عنصر الجسم عند فتح نافذة مشروط?
- كيف يمكنني تعيين" تجاوز: مخفي " خاصية عنصر الجسم?
- هل هناك أي طرق أخرى لتعطيل التمرير عندما تكون النافذة المشروطة مفتوحة?
لماذا قد تحتاج إلى تعطيل التمرير في نافذة مشروطة
غالبا ما تستخدم النوافذ المشروطة في تطوير الويب لتزويد المستخدمين بعناصر تفاعلية مثل النماذج والصور ومقاطع الفيديو وعناصر المحتوى الأخرى التي تظهر كنافذة منبثقة أعلى المحتوى الرئيسي للصفحة.
يمكن أن يكون تعطيل التمرير في نافذة مشروطة مفيدا في الحالات التالية:
الحفاظ على التركيز: عند فتح النافذة المشروطة ، يجب أن يكون المستخدم قادرا على التركيز فقط على العناصر الموجودة داخل النافذة المشروطة ، وعدم التمرير عبر المحتوى الموجود أسفلها. هذا مهم بشكل خاص لإمكانية الوصول وسهولة الاستخدام.
تجنب التفاعلات غير المرغوب فيها: إذا كانت النافذة المشروطة تحتوي على عناصر من المحتوى القابل للتمرير ، فإن التمرير في الصفحة الرئيسية يمكن أن يتسبب في تفاعلات غير مرغوب فيها ، على سبيل المثال ، التمرير في كل من النافذة المشروطة والمحتوى الرئيسي في نفس الوقت.
بشكل عام ، يساعد تعطيل التمرير في النافذة المشروطة على تحسين تجربة المستخدم ومنع الأخطاء وجعل واجهة المستخدم أكثر سهولة. ومع ذلك ، في بعض الحالات ، قد يكون التمرير ضروريا للمحتوى الطويل داخل نافذة مشروطة ، وفي مثل هذه الحالات يجب استخدام حلول بديلة لضمان سهولة الاستخدام.
مشاكل في التمرير عند فتح النوافذ المشروطة
يمكن أن يؤدي فتح النوافذ المشروطة إلى بعض المشكلات في تمرير الصفحة. وهنا بعض من المشاكل الرئيسية التي قد تواجهها:
التمرير في الخلفية: عند فتح النافذة المشروطة ، قد يتم تمرير خلفية الصفحة ، مما قد يكون غير مريح للمستخدم. يمكن للخلفية التمرير حتى عند تعطيل التمرير داخل النافذة المشروطة.
التمرير المزدوج: في بعض الأحيان عند فتح نافذة مشروطة ، لا يختفي شريط التمرير على الصفحة ، ويتعين على المستخدم تمرير كل من النافذة المشروطة والصفحة ، مما يؤدي إلى الإزعاج.
قص المحتوى: عندما يكون التمرير نشطا وتفتح النافذة المشروطة داخل الصفحة ، قد يتم اقتصاص محتويات النافذة.
يمكن حل هذه المشكلات باستخدام طرق مختلفة ، مثل تغيير الأنماط أو استخدام جافا سكريبت أو المكتبات ذات النوافذ المشروطة. كل نهج له مزاياه وعيوبه ، واختيار الطريقة يعتمد على الوضع والظروف المحددة.
| الطريقة | المزايا | العيوب |
|---|---|---|
| تغيير الأنماط |
|
|
| جافا سكريبت |
|
|
| المكتبات مع ويندوز مشروط |
|
|
اعتمادا على المهمة المحددة ومتطلبات المشروع ، يمكنك اختيار الطريقة الأنسب لحل مشاكل التمرير عند فتح النوافذ المشروطة.
الطريقة: استخدام خاصية كس"تجاوز"
طريقة أخرى بسيطة لتعطيل التمرير عندما تكون النافذة المشروطة مفتوحة هي استخدام خاصية كس"تجاوز".
لإخفاء التمرير ، يمكنك تعيين القيمة "مخفي" لخاصية "الفائض" للعنصر الذي يحتوي على النافذة المشروطة:
وبالتالي ، سيتم إخفاء أي محتوى يتجاوز النافذة المشروطة ولن يكون مرئيا للمستخدم ، وسيتم تعطيل التمرير.
ومع ذلك ، تجدر الإشارة إلى أن هذه الطريقة يمكن أن تؤدي إلى اقتصاص المحتوى إذا كان حجم النافذة المشروطة لا يتطابق مع المحتوى.
يجب أن يؤخذ في الاعتبار أيضا أنه يمكن تطبيق خاصية" الفائض " ليس فقط على حاوية النافذة المشروطة ، ولكن أيضا على محتوياتها أو عناصر الصفحة الأخرى التي يجب تعطيل التمرير فيها.
الطريقة: إضافة فئة إلى الجسم
واحدة من أسهل الطرق لتعطيل التمرير عند فتح نافذة مشروط هو إضافة فئة إلى هتمل أو عنصر الجسم.
1. إضافة فئة باستخدام جافا سكريبت:
وثيقة.الجسم.قائمة الفصل.إضافة ('مشروط-فتح');
2. عند فتح نافذة مشروط ، قم بتطبيق هذه الفئة على هتمل أو عنصر الجسم:
3. إذا كنت تستخدم إطارا أو مكتبة مثل رد الفعل أو الزاوي ، فيمكنك استخدام آليات إدارة الفصل لإضافة فئة عند فتح نافذة مشروطة.
4. باستخدام كس ، يمكنك إضافة أنماط لمنع التمرير إذا كان هناك فئة " مشروط-فتح:
.مشروط-فتح {
تجاوز: مخفي;
}
5. للسماح بالتمرير مرة أخرى بعد إغلاق النافذة المشروطة ، قم بإزالة الفصل من الجسم:
وثيقة.الجسم.قائمة الفصل.إزالة ('مشروط-فتح');
6. إزالة الطبقة من هتمل أو عنصر الجسم:
وبالتالي ، فإن إضافة فئة إلى عنصر الجسم هي طريقة سهلة للتحكم في التمرير عندما تكون النافذة المشروطة مفتوحة.
سؤال وجواب
كيف يمكنني تعطيل التمرير عندما تكون النافذة المشروطة مفتوحة?
هناك طرق مختلفة لتعطيل التمرير عندما تكون النافذة المشروطة مفتوحة. أبسطها هو إضافة فئة إلى عنصر الجسم عند فتح نافذة مشروطة وتعيين خاصية" تجاوز السعة: مخفي". سيمنع هذا محتوى الصفحة من التمرير عندما تكون النافذة المشروطة مفتوحة.
كيف يمكنني إضافة فئة إلى عنصر الجسم عند فتح نافذة مشروط?
لإضافة فئة إلى عنصر أساسي عند فتح نافذة مشروطة ، يمكنك استخدام جافا سكريبت. في معالج الحدث فتح نافذة مشروط ، تحتاج إلى إضافة التعليمات البرمجية التي من شأنها إضافة فئة إلى عنصر الجسم. على سبيل المثال ، يمكنك استخدام الكود التالي: مستند.الجسم.قائمة الفصل.إضافة ('مشروط-فتح');
كيف يمكنني تعيين" تجاوز: مخفي " خاصية عنصر الجسم?
لتعيين خاصية "تجاوز": مخفي" في نص العنصر عندما تكون النافذة المشروطة مفتوحة ، يمكنك استخدام كس أو جافا سكريبت. باستخدام كس ، يمكن القيام بذلك على النحو التالي: الجسم.مشروط-فتح { تجاوز: مخفي؛}. باستخدام جافا سكريبت ، يمكنك استخدام الكود التالي: مستند.الجسم.أسلوب.تجاوز = 'مخفي';