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