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