كيفية إخفاء شريط التمرير

تعلم كيفية استخدام CSS لإخفاء شريط التمرير.

كيفية إخفاء شريط التمرير

إضافة overflow: hidden;، يمكنه إخفاء كلا شريطي التمرير الأفقي والعمودي.

مثال

body {
  overflow: hidden; /* إخفاء شريطي التمرير الأفقي والعمودي */
}

جربها بنفسك

للإخفاء فقط شريط التمرير العمودي أو فقط شريط التمرير الأفقي، استخدم overflow-y أو overflow-x:

مثال

body {
  overflow-y: hidden; /* إخفاء شريط التمرير العمودي */
  overflow-x: hidden; /* إخفاء شريط التمرير الأفقي */
}

جربها بنفسك

لاحظ،overflow:hidden سيتم أيضًا إزالة وظيفة شريط التمرير. لن يكون هناك تمرير داخل الصفحة.

إخفاء شريط التمرير ولكن الحفاظ على الوظيفة

لإخفاء شريط التمرير ولكن الحفاظ على القدرة على التمرير، يمكنك استخدام الكود التالي:

مثال

/* إخفاء شريط التمرير في Chrome، Safari و Opera */
.example::-webkit-scrollbar {
  display: none;
}
/* إخفاء شريط التمرير في IE، Edge و Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

جربها بنفسك

المتصفحات Webkit (مثل Chrome، Safari و Opera) تدعم غير المعايير ::-webkit-scrollbar الرمز المزيف، يتيح لنا تعديل مظهر شريط التمرير في المتصفح. يدعم IE و Edge -ms-overflow-style: دعم Firefox خصائص scrollbar-width خصائص، تتيح لنا إخفاء شريط التمرير ولكن الحفاظ على وظيفته.

الصفحات ذات الصلة

دليل:CSS الإزحام

دليل مرجعي:خصائص CSS overflow