كيف - إخفاء شريط التمرير
تعرف على كيفية إخفاء أشرطة التمرير باستخدام CSS.
كيفية إخفاء أشرطة التمرير
إضافة overflow: hidden;
لإخفاء كل من شريط التمرير الأفقي والعمودي.
مثال
body {
overflow: hidden; /* Hide scrollbars */
}
لإخفاء شريط التمرير العمودي فقط ، أو شريط التمرير الأفقي فقط ، استخدم overflow-y
أو overflow-x
:
مثال
body {
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
لاحظ أن ذلك overflow: hidden
سيؤدي أيضًا إلى إزالة وظائف شريط التمرير. لا يمكن التمرير داخل الصفحة.
نصيحة: لمعرفة المزيد حول overflow
الخاصية ، انتقل إلى CSS Overflow Tutorial أو CSS overflow Property Reference .
إخفاء أشرطة التمرير مع الحفاظ على الوظائف
لإخفاء أشرطة التمرير ، مع الاستمرار في التمرير ، يمكنك استخدام الكود التالي:
مثال
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar
for IE, Edge and 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
الخاصية ، مما يسمح لنا بإخفاء شريط التمرير ، مع الاحتفاظ بالوظائف.