كيفية تغير سكرول بار لشكل احترافي

سكرول بار هو شريط الجانبي اللي يستخدمه الزائر او المتصفح في نزول وصعود في مدونتك ويكون علي شكل الافتراضي وتفكرون فـ انه لايمكن تغير شكلة ولاطن هذا خطأ اولاً احب ان انوه انه شكل فقط ليس له اي ميزة ولاكن اذا كنت تريد تغيير شكلة فلا مانع سوف اعرض لكم 16 اشكال

معاينة

في المعاينة هناك 16 شكل ولاكن سوف اعرض لكم الشكل التاسع (9) لانه اعجبني واحببت ان اشاركة معكم مع اعدادات الوانة

اولاً لاضافة السكرول بار لديك في القالب اكواد CSS تقوم بإضافة الكود الاتي في اؤاخر الاكواد CSS

::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}

::-webkit-scrollbar
{
 width: 10px;
 background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
 background-color: #F90; 
 background-image: -webkit-linear-gradient(90deg,
                                           rgba(255, 255, 255, .2) 25%,
             transparent 25%,
             transparent 50%,
             rgba(255, 255, 255, .2) 50%,
             rgba(255, 255, 255, .2) 75%,
             transparent 75%,
             transparent)
}

الان احفظ القالب واذهب الي المدونة لتجد السكرول بار بـ هذا الشكل

---

الان نقوم بإعدادات السكرول بار
background-color: #F5F5F5;

كود لون السكرول

background-color: #F90;

تقوم بتغيرها بنفس اللون او افتح منه قليلة

الي هنا اكون انتيهت

رابط المصمم الاصلي

https://codepen.io/GhostRider/full/GHaFw

لتكملة اشكال السكرول بار

http://codepen.io/EbramN/full/vyeKXd