مقدمه

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

خوشبختانه CSS امکان تغییر رنگ، اندازه، شکل و حتی افکت‌های اسکرول‌بار را فراهم کرده است.

در این مقاله با روش‌های مختلف شخصی‌سازی Scrollbar در CSS آشنا می‌شویم.

اسکرول‌بار چیست؟

اسکرول‌بار همان نوار کناری یا پایینی صفحه است که به کاربران اجازه می‌دهد در محتوای طولانی جابه‌جا شوند.

در مرورگرها معمولاً شامل دو بخش اصلی است:

• Track (مسیر حرکت)
• Thumb (بخش متحرک)

تصویر ذهنی:

┌─────────┐
│         │
│ ████    │ ← Thumb
│         │
│         │
└─────────┘
   Track

شخصی‌سازی اسکرول‌بار در مرورگرهای WebKit

مرورگرهای مبتنی بر WebKit و Chromium مانند:

• Google Chrome
• Microsoft Edge
• Opera
• Safari

از مجموعه‌ای از pseudo-elementهای اختصاصی پشتیبانی می‌کنند.

تغییر عرض اسکرول‌بار

::-webkit-scrollbar {
  width: 12px;
}

تغییر رنگ مسیر (Track)

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

تغییر رنگ بخش متحرک (Thumb)

::-webkit-scrollbar-thumb {
  background: #888;
}

افکت Hover روی Thumb

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

نمونه کامل

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #f3f4f6;
}

::-webkit-scrollbar-thumb {
  background: #3b82f6;
  border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
  background: #2563eb;
}

نتیجه:

• اسکرول‌بار باریک‌تر می‌شود.
• رنگ آن آبی خواهد بود.
• گوشه‌های گرد خواهد داشت.
• هنگام قرار گرفتن ماوس روی آن، رنگ تغییر می‌کند.

شخصی‌سازی اسکرول‌بار در Firefox

فایرفاکس از pseudo-elementهای WebKit پشتیبانی نمی‌کند.

برای Firefox باید از دو ویژگی زیر استفاده کنید:

scrollbar-width
scrollbar-color

تغییر اندازه

html {
  scrollbar-width: thin;
}

مقادیر قابل استفاده:

scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-width: none;

تغییر رنگ

html {
  scrollbar-color: #3b82f6 #f3f4f6;
}

فرمت:

scrollbar-color: thumb track;

نمونه کامل Firefox

html {
  scrollbar-width: thin;
  scrollbar-color: #3b82f6 #f3f4f6;
}

ساخت اسکرول‌بار مدرن

نمونه محبوب در سایت‌های امروزی:

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #6366f1;
  border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4f46e5;
}

این سبک در داشبوردها و پنل‌های مدیریتی بسیار رایج است.

مخفی کردن اسکرول‌بار

گاهی می‌خواهیم امکان اسکرول وجود داشته باشد اما خود نوار نمایش داده نشود.

Chrome و Edge

::-webkit-scrollbar {
  display: none;
}

Firefox

.container {
  scrollbar-width: none;
}

Internet Explorer

.container {
  -ms-overflow-style: none;
}

مخفی کردن کامل برای همه مرورگرها

.container {
  overflow: auto;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

.container::-webkit-scrollbar {
  display: none;
}

اسکرول‌بار فقط برای یک عنصر

نیازی نیست کل سایت را تغییر دهید.

مثال:

.comments {
  height: 400px;
  overflow-y: auto;
}

.comments::-webkit-scrollbar {
  width: 8px;
}

.comments::-webkit-scrollbar-thumb {
  background: #10b981;
}

در این حالت فقط بخش نظرات اسکرول‌بار سفارشی خواهد داشت.

نکات مهم

زیاده‌روی نکنید

اسکرول‌بار بخشی از تجربه کاربری مرورگر است. تغییرات شدید ممکن است باعث سردرگمی کاربران شود.

دسترسی‌پذیری را رعایت کنید

رنگ Thumb و Track باید کنتراست مناسبی داشته باشند تا کاربران به راحتی بتوانند اسکرول‌بار را مشاهده کنند.

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

• Chrome ✅
• Edge ✅
• Safari ✅
• Opera ✅
• Firefox ⚠️ (روش متفاوت)
• Internet Explorer ❌

جمع‌بندی

شخصی‌سازی اسکرول‌بار یکی از راه‌های ساده برای حرفه‌ای‌تر کردن ظاهر سایت است.

برای این کار معمولاً از:

::-webkit-scrollbar
::-webkit-scrollbar-track
::-webkit-scrollbar-thumb

در مرورگرهای مبتنی بر Chromium و از:

scrollbar-width
scrollbar-color

در Firefox استفاده می‌شود.

با چند خط CSS می‌توانید اسکرول‌بارهای زیباتر، مدرن‌تر و هماهنگ با طراحی سایت خود ایجاد کنید، بدون اینکه نیاز به جاوااسکریپت یا کتابخانه‌های اضافی داشته باشید.

از همراهی شما با پارمین کلود متشکریم.