چگونه ایجاد می‌شود: اسکرول شخصی‌سازی شده

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

چگونه اسکرول شخصی‌سازی شده ایجاد کنیم

Chrome، Edge، Safari و Opera از پseudo-elements غیر استاندارد پشتیبانی می‌کنند. ::webkit-scrollbar پseudo-element که به ما اجازه می‌دهد ظاهر اسکرول مرورگر را تغییر دهیم.

در مثال زیر یک اسکرول با عرض 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، می‌توانید از عناصر پseudo برای شخصی‌سازی اسکرول مرورگر استفاده کنید: