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