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

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

الأضافة الشريط الجانبي إتجه إلي لوحة تحكم بلوجر  المظهر  تخصيص  متقدم  إضافة 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;
}