تغيير شكل شريط التمرير الافتراضي للمتصفح

معاينة الأشكال

مرحباً بمتابعين  مينت ويب الكرام في هذه المقالة ، سنتطرق إلي شرح تغير مظهر شريط التمريرالافتراضي للمتصفح ،ولكن في الوقت الحالي هذا الشرح يعمل فقط علي المتصفحات التي تدعم webkit ، مثل Opera و Chrome و Safari و UC Browser ،ولكن لسوء الحظ لن تعمل عي متصفحات أخري مثل Firefox و IE .

تثبيت إضافة شريط التمرير علي بلوجر


الأضافة الشريط الجانبي إتجه إلي لوحة تحكم بلوجر المظهر تخصيص متقدم إضافة CSS بعدها نقوم بإضافة نمط Css الذي أختارته في الأسفل سأقوم بوضع 6 أنماط لشريط التمريرالجانبي بأشكل مختلفة.

تغيير شكل شريط التمرير الافتراضي للمتصفح

تغيير شكل شريط التمرير الافتراضي للمتصفح

الشكل الأول


/* الشكل رقم1 */
body::-webkit-scrollbar {
  width: 8px;
}
body::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
  background-color: #E2E2E2;
  border-radius: 10px;
}

الشكل الثاني


/* الشكل رقم 2 */
body::-webkit-scrollbar {
  width: 5px;
}
body::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
  background-color: #11171a;
  border-radius: 10px;
   
}

الشكل الثالث


/* الشكل رقم 3 */
body::-webkit-scrollbar {
  width: 10px;
}
body::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}

الشكل الرابع


/* الشكل رقم 4 */
body::-webkit-scrollbar {
  width: 12px;
}
body::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.4);
}
body::-webkit-scrollbar-thumb {
  background-color: #FF8C00;
  background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.3) 20%,transparent 20%,transparent 40%,rgba(255, 255, 255, 0.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%,transparent 80%,rgba(255, 255, 255, 0.3) 80%);
  border-radius: 10px;
}

الشكل الخامس


/* االشكل رقم 5 */
body::-webkit-scrollbar {
  width: 15px;
}
body::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.1);
}
body::-webkit-scrollbar-thumb {
  background-image: linear-gradient(45deg, #4e54c8, #8f94fb);
  border-radius: 10px;
 -webkit-box-shadow: rgba(0,0,0,.12) 0 3px 13px 1px;
}

الشكل السادس


/* الشكل رقم 6 */
body::-webkit-scrollbar {
  width: 12px;
}
body::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.4);
}
body::-webkit-scrollbar-thumb {
  background-color: #799F0C;
  background-image:-webkit-linear-gradient(rgba(255,255,255,.3) 20%,transparent 20%,transparent 40%,rgba(255, 255, 255, 0.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%,transparent 80%,rgba(255, 255, 255, 0.3) 80%);
  border-radius: 10px;
}

إضغط علي تطبيق علي المدونة ليتم حفظ التغيرات وتذكر أن الأضافة لن تعمل أذا كنت تستخدم متصفح مثل Firefox أو Internet Explore .

 الخاتمة

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