كيف تغير شكل و لون scrollbar لتناسب شكل موقعك

عدة مواقع إلكترونية ولات كاتغير الشكل و اللون الخاص ب Scrollbar باش تناسب الشكل و الذوق الخاص بالموقع, هاد التغيير كايضيف واحد اللمسة إحترافية. بإستعمال css بإمكانا نتحكمو في style ديال scrollbar.

قبل ما نبداو , نشوفو الشكل العادي ديال scrollbar.

بطبيعة الحال فايت لكم شفتو هاد الشكل فالعديد من المواقع الإلكترونية.

نفتارضو اننا غانغيرو الشكل ديال scrollbar الخاصة بال body, مع العلم أنه بإمكانك تحكم في scrollbar الخاصة بأي جزء من الموقع ديالك.

1- أولا :

أول حاجة غانديروها هي نغيرو العرض ديال scrollbar.

body::-webkit-scrollbar {
    width: 10px;
}

النتيجة غاتكون بحال هاد الشكل:

2- ثانيا :

ألان غانغيرو الشكل ديال مسار scrollbar أو ما يسمى ب scrollbar track. بإمكانك التحكم فأي حاجة بغيتي, مثلا background color , shadow , border radius , border ...

body::-webkit-scrollbar-track {
    background-color: #00cc99;
    border-radius: 50px;
}

النتيجة على هذا الشكل:

3- ثالثا :

في الخطوة الثالثة و الأخيرة غانغيرو شكل و لون الشريط الخاص ب scrollbar أو ما يسمى ب scrollbar thumb.

body::-webkit-scrollbar-thumb {
    background: #6600ff;
    border-radius:50px;
}

النتيجة النهائية:

النهاية :

كيف ما شفتو, تغيير شكل و لون scrollbar سهل جدا و بسيط لكن مهم للحفاض على التناسق و جمالية الموقع الخاص بك.