چگونه ایجاد می‌شود: اسکرول‌بار سفارشی

یاد بگیرید که چگونه اسکرول‌بار سفارشی با استفاده از CSS ایجاد کنید.

چگونه اسکرول‌بار سفارشی ایجاد کنیم

Chrome، Edge، Safari و Opera از غیراستاندارد ::-webkit-scrollbar عنصر فرضی که به ما اجازه می‌دهد ظاهر اسکرول‌بار مرورگر را تغییر دهیم.

در مثال زیر یک اسکرول‌بار با عرض 10px ایجاد می‌شود که دارای مسیر/رنگ اسکرول‌بار خاکستری و اسکرول‌بار تیره‌ای (#888) است:

/* عرض */
::-webkit-scrollbar {
  width: 10px;
}
/* مسیر */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* اسکرول‌بار */
::-webkit-scrollbar-thumb {
  background: #888;
}
/* اسکرول‌بار در حالت مورب */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

پرای خود امتحان کنید

این مثال یک اسکرول‌بار با اثر سایه ایجاد می‌کند:

مثال

/* عرض */
::-webkit-scrollbar {
  width: 20px;
}
/* مسیر */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}
/* اسکرول‌بار */
::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
}

پرای خود امتحان کنید

انتخابگر اسکرول‌بار

برای مرورگرهای webkit، می‌توانید از عناصر فرضی زیر برای شخصی‌سازی اسکرول‌بار مرورگر استفاده کنید: