عرض أشرطة التمرير في متصفحات الجوال

يركز هذا السؤال على مشكلة أشرطة التمرير المخفية في متصفحات الجوال عند استخدام "overflow:auto" أو " تجاوز السعة: مرئي" على المحتوى القابل للتمرير. بينما يكون شريط التمرير مرئيًا على متصفحات سطح المكتب، فإنه يختفي على الأجهزة المحمولة ما لم يتم التمرير بشكل نشط.

لحل هذه المشكلة، يمكنك تعديل CSS الخاص بك ليشمل التعليمات البرمجية التالية، الخاصة بمحرك متصفح Webkit:

::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 12px;
}

::-webkit-scrollbar:horizontal {
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ffffff;
}

يحدد هذا الرمز مظهر شريط التمرير، بما في ذلك عرضه وارتفاعه ولون الإبهام ولون المسار. من خلال تخصيص هذه الخصائص، يمكنك جعل شريط التمرير مرئيًا دائمًا على الأجهزة المحمولة، حتى قبل التمرير.