هل ما زلنا بحاجة إلى شريط التمرير؟
يمكن أن يوضح شريط التمرير أن عنصر ما أو صفحة ما ,ما زال له استمرارية إما إلى أسفل أو اليمين أو اليسار.
ولكن للأسف يتم تحديد عرض وتنسيق شريط التمرير بواسطة المستعرض الذي يستخدمه المستخدم , بحيث يبو مختلفا من مستعرض لأخر ومن جهاز لأخر.
و طبعا فإن شريط التمرير يشغل بعضا من البكسلات في يسار الصفحة الذي يبدو وكانه يدفع المحتوى نحو اليسار, واظن انك اذا ما كنت من محبي التصميم البسيط فإن ذلك سيزعجك.
وما احاوال الوصول اليه هو طرح طريقة لإخفاء شريط التمرير او تصغيره على جميع المتصفحات والاجهزة وذلك يشمل جميع المتصفحات وايضا متصفح فايرفوكس (المزعج من ناحية تخصيص شريط التمرير).
اتوقع ان تفهمني أكثر الان بعد معاينتك لصفحة ويب لا تحتوي على شريط التمرير,بالطبع فمعضم اجهزة الهاتف الحديثة متصفحاتها لا تحتوي على شريط تمرير, لكن فالنفترض ان المستخدم على جهاز الحاسب لا يملك ماوس, حسنا يمكنه استخام ازرار الاسهم للإنتقال, حسنا فالنفترض ايضا ان ازراره معطلة, اذا فاليذهب وليشتري كيبورد و ماوس جديد.
من السهل جدا التخلص من شريط التمرير , وذلك لا يتطلب الا بضعة سطور برميجة بلغة CSS.
ضع الكود الذي يناسبك اعلا/قبل الوسم ]]></b:skin>
اخفاء شريط التمرير من على المدونة.
/* Firefox */
html {
scrollbar-width: none;
}
/* Webkit */
html::-webkit-scrollbar {
display: none;
}
إذا كنت لا تريد حقًا إزالة شريط التمرير ، فيمكنك تصغيره بحيث لا يتعارض مع الشاشة عبر وضع الكود التالي
/* Firefox */
html {
scrollbar-width: thin;
}
/* Webkit */
html::-webkit-scrollbar {
width: 9px;
height: 9px;
}
اخفاء شريط التمرير من العناصر
/* Firefox */
.element {
scrollbar-width: none;
}
/* Webkit */
.element::-webkit-scrollbar {
display: none;
}
قم بتغيير element
الى class العنصر الذي تريد ازالة الشريط منه كـ صندوق اقتباس الأكواد وغيرها
وايضا اذا كنت لا تريد اذالة شريط التمرير بل تصغيره استخدم الكود التالي
/* Firefox */
.element {
scrollbar-width: thin;
}
/* Webkit */
.element::-webkit-scrollbar {
width: 9px;
height: 9px;
}
ولكن للأسف هذه الاكواد لا تعمل على متصفح انترنت اكسبلولر و EDGE الخاص بمايكروسوفت, من يستخدم تلك المتصفحات على اية حال 😂
اذا كانت لديكم اي اسفسارات اطرحوها في التعليقات
العفو وأهلا وسهلا