سفارشی‌سازی کردن رنگ یا ضخامت نوار پیمایش

می‌توانید ظاهر نوارهای پیمایش را بااستفاده از ویژگی‌های CSS استاندارد scrollbar-color و scrollbar-width سفارشی‌سازی کنید.

• scrollbar-color: دو مقدار <color> را می‌پذیرد. اولی برای دکمه (بخش متحرک) و دومی برای شیار (پس‌زمینه ثابت) اعمال می‌شود.
• scrollbar-width: auto (پیش‌فرض)، thin (نوع باریک‌تر)، یا none (نوار پیمایش را کاملاً پنهان می‌کند اما قابلیت پیمایش را حفظ می‌کند) را می‌پذیرد.

اعمال کردن scrollbar-color و scrollbar-width

اجباری: از scrollbar-color و scrollbar-width در محفظه پیمایش‌پذیر استفاده کنید.

هنگام استفاده از scrollbar-color، از متغیرهای CSS برای جدا نگه داشتن رنگ‌های لغزنده و شیار استفاده کنید تا خوانایی و قابلیت نگهداری (به‌ویژه هنگام استفاده از جایگزین‌ها) حفظ شود.

.scroller {
  --scrollbar-thumb: var(--color-neutral-70);
  --scrollbar-track: var(--color-neutral-90);

  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

راهبردهای جایگزین

پشتیبانی مرورگر و بازگشت برای scrollbar-color

این ویژگی ارتقای پیش‌رو است و همیشه به جایگزین نیاز ندارد.

اگر سبک‌بندی مهم است و هدف «خط پایه» کاربر «خط پایه به‌طور گسترده دردسترس» یا قدیمی‌تر است، باید شبه‌عناصر غیراستاندارد ::-webkit-scrollbar را به‌عنوان جایگزین اضافه کنید.

جایگزین‌های قدیمی را در یک بلوک @supports not (scrollbar-color: auto) قرار دهید تا از تداخل بین ویژگی‌های استاندارد و انتخاب‌کننده‌های قدیمی WebKit در مرورگرهایی که از هر دو به‌صورت بومی پشتیبانی می‌کنند، جلوگیری شود.

اگر از ویژگی‌های سفارشی برای تعریف رنگ‌ها استفاده می‌کنید، این ویژگی‌ها به‌طور خودکار به انتخاب‌کننده‌های قدیمی WebKit منتقل می‌شوند. لازم نیست آن‌ها را تکرار کنید.

/* Legacy fallback for WebKit/Blink browsers */
@supports not (scrollbar-color: auto) {
  .scroller::-webkit-scrollbar {
    /* Must define base size in WebKit for custom colors to be visual */
    width: 12px;
    height: 12px;
  }

  .scroller::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }

  .scroller::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}