سفارشی‌سازی اسکرول

در طراحی‌های مدرن وب، ممکن است بخواهید ظاهر نوار اسکرول (scrollbar) را متناسب با طراحی سایت خود سفارشی‌سازی کنید. CSS امکان این کار را به کمک شبه‌عناصر اختصاصی برای برخی مرورگرها فراهم کرده است.

شبه‌عناصر نوار اسکرول در WebKit (Chrome، Safari و Edge)

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

/* کل نوار اسکرول */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

/* بخش درونی که حرکت می‌کند */
::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}

/* پس‌زمینه کلی اسکرول */
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 6px;
}

/* گوشه‌های اسکرول */
::-webkit-scrollbar-corner {
  background-color: #f1f1f1;
}

سفارشی‌سازی در فایرفاکس

مرورگر فایرفاکس از قوانین استانداردتری برای اسکرول استفاده می‌کند. می‌توانید از ویژگی‌های زیر استفاده کنید:

/* فعال‌سازی استایل‌های نوار اسکرول در فایرفاکس */
* {
  scrollbar-width: thin; /* یا auto، none */
  scrollbar-color: #888 #f1f1f1; /* thumb و track */
}

مثال ترکیبی برای پشتیبانی بیشتر

.my-scroll-box {
  overflow: auto;
  height: 200px;

  /* فایرفاکس */
  scrollbar-width: thin;
  scrollbar-color: #4A90E2 #F5F5F5;
}

.my-scroll-box::-webkit-scrollbar {
  width: 10px;
}

.my-scroll-box::-webkit-scrollbar-thumb {
  background-color: #4A90E2;
  border-radius: 5px;
}

.my-scroll-box::-webkit-scrollbar-track {
  background-color: #F5F5F5;
}

نکات طراحی

بهتر است از رنگ‌هایی استفاده کنید که با طراحی کلی سایت هماهنگ باشند.
ضخامت زیاد نوار اسکرول می‌تواند در دستگاه‌های لمسی مزاحم باشد.
از مخفی کردن کامل اسکرول (مثلاً با `display: none`) خودداری کنید مگر در موارد خاص.

نکات سئو و دسترس‌پذیری

اسکرول سفارشی‌شده تأثیر مستقیمی بر سئو ندارد، اما تجربه کاربری (UX) را بهتر می‌کند.
اگر اسکرول بیش از حد نازک یا ناپیدا باشد، ممکن است کاربران متوجه نشوند که صفحه قابل اسکرول است.
رعایت کنتراست کافی میان رنگ thumb و track برای افراد کم‌بینا مهم است.

تمرین پیشنهادی

یک div بسازید با محتوای زیاد و ویژگی `overflow: auto`، سپس:

با WebKit scrollbar‌ها را آبی و گرد کنید.
با scrollbar-width فایرفاکس، ضخامت را کاهش دهید.
در حالت hover، رنگ thumb را تیره‌تر کنید.

مرورگرهای پشتیبانی

مرورگر	پشتیبانی WebKit	پشتیبانی scrollbar-width
Chrome	بله	خیر
Safari	بله	خیر
Firefox	خیر	بله
Edge (جدید)	بله	خیر

محدودیت‌ها

استاندارد W3C برای سفارشی‌سازی اسکرول هنوز نهایی نشده است.
برخی تنظیمات فقط در مرورگر خاصی کار می‌کنند.
در موبایل، سیستم‌عامل ممکن است نوار اسکرول را نادیده بگیرد یا جایگزین کند.

پیوندهای مرتبط

جمع‌بندی

سفارشی‌سازی اسکرول در CSS باعث ایجاد ظاهری حرفه‌ای‌تر در رابط کاربری می‌شود. با توجه به تفاوت‌های مرورگرها، ترکیبی از شبه‌عناصر WebKit و ویژگی‌های استاندارد فایرفاکس، بهترین نتیجه را ایجاد می‌کند.