مساحة اعلانية

موضوع عشوائي

آخر المواضيع

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

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

اضافات بلوجر
شريط التمرير الافتراضى للمتصفح

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

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


/* الشكل رقم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;
}

الكــاتــب

هناك تعليق واحد:

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

    ردحذف

جميع الحقوق محفوظة لــ فلاما للمعلوميات 2019 ©

بضغطة زر تدعمنا وتشارك الفائدة