طراحی اسکرول‌بار سفارشی با CSS — راهنمای کامل

اسکرول‌بار (نوار پیمایش) یکی از اجزای رابط کاربری است که اغلب نادیده گرفته می‌شود، اما سفارشی‌سازی آن می‌تواند تجربه کاربری و هویت بصری سایت را تقویت کند. در این مقاله به صورت عملی و قابل اجرا روش‌های ساخت اسکرول‌بار سفارشی با CSS را بررسی می‌کنیم، محدودیت‌ها و بهترین روش‌ها را می‌گوییم و مثال‌های واقعی برای مرورگرهای مختلف می‌آوریم.

مفاهیم پایه و رویکردهای سازگاری

دو گروه اصلی برای سفارشی‌سازی وجود دارند:

• استفاده از شبه‌العناصر داخلی مرورگر (مثل ::-webkit-scrollbar) — سریع و ساده اما فقط در موتورهای WebKit/Blink (Chrome، Edge جدید، Safari) کامل پشتیبانی می‌شود.
• استفاده از ویژگی‌های استاندارد مانند scrollbar-color و scrollbar-width — قابل استفاده در فایرفاکس و بخشی از استانداردهای جدید.

برای تجربه‌ای یکپارچه باید هر دو رویکرد را ترکیب کنید و همچنین نکات دسترس‌پذیری و سازگاری را در نظر بگیرید.

نمونه پایه برای مرورگرهای WebKit/Blink

/* فقط برای مرورگرهای WebKit/Blink */::-webkit-scrollbar {
  width: 12px;           /* عرض اسکرول‌بار عمودی */  height: 12px;          /* ارتفاع اسکرول‌بار افقی */}
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 8px;
  border: 3px solid #f1f1f1; /* ایجاد فاصله برای افکت "inset" */}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

توضیح: این کد شبه‌العناصر ::-webkit-scrollbar و زیرعنصرهایش را سفارشی می‌کند. width و height اندازهٔ نوار را تعیین می‌کنند. استفاده از border روی thumb باعث می‌شود ظاهر thumb یک فضای داخلی داشته باشد. حالت :hover برای تعامل کاربر اضافه شده است.

پشتیبانی فایرفاکس با ویژگی‌های استاندارد

/* فایرفاکس */* {
  scrollbar-width: thin;                  /* مقدار: auto | thin | none */  scrollbar-color: #888 #f1f1f1;          /* thumb-color track-color */}

توضیح: فایرفاکس از scrollbar-color و scrollbar-width پشتیبانی می‌کند. این روش ساده‌تر اما محدودتر است (مثلاً نمی‌توان شعاع گوشه یا افکت‌های پیچیده را مشخص کرد).

سفارشی‌سازی فقط برای یک المنت (scoped)

.box {
  width: 300px;
  height: 200px;
  overflow: auto;
  padding: 10px;
}
.box::-webkit-scrollbar { width: 10px; }
.box::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#6b6bff,#3b3bff); border-radius: 6px; }

توضیح: گاهی نمی‌خواهیم کل صفحه تحت تاثیر قرار گیرد. با هدف‌گیری یک کلاس مثل .box می‌توان اسکرول‌بار بخش خاصی را تغییر داد؛ این رویکرد برای کامپوننت‌ها و پنل‌های خاموش مفید است.

دسترسی و تجربه کاربری (Accessibility)

• برای کاربران لمسی، اندازهٔ اسکرول‌بار را در @media (hover: none) افزایش دهید تا لمس راحت‌تر شود.
• کنتراست بین thumb و track را رعایت کنید (طبق استاندارد WCAG) تا افراد با بینایی ضعیف بتوانند آن را ببینند.
• از حذف کامل اسکرول‌بار خودداری کنید؛ برخی کاربران وابسته به آن هستند.
• برای کاربران کیبورد، اطمینان حاصل کنید که عنصر قابل اسکرول فوکوس‌پذیر است و حلقهٔ فوکوس (focus outline) قابل مشاهده باقی می‌ماند.

حالت‌های واکنش‌گرا و دارک مود

@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-track { background: #202020; }
  ::-webkit-scrollbar-thumb { background: #6a6a6a; border: 3px solid #202020; }
}

توضیح: با استفاده از prefers-color-scheme می‌توان رنگ اسکرول‌بار را در حالت تاریک تنظیم کرد تا با طراحی هماهنگ باشد.

نمونه پیشرفته: گرادیانت، گذار و گوشه‌های نرم

/* پیشرفته - گرادیانت و transition */::-webkit-scrollbar { width: 14px; }
::-webkit-scrollbar-track { background: #ececec; border-radius: 10px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,#ff8a00,#ff3d00);
  border-radius: 10px;
  border: 3px solid #ececec;
}
/* تغییر رنگ در حالت فعال یا hover */::-webkit-scrollbar-thumb:hover { filter: brightness(0.9); }

توضیح: این نمونه برای ایجاد ظاهری مدرن از گرادیانت و گوشه‌های گرد استفاده می‌کند. توجه کنید که برخی افکت‌ها مثل transition روی همهٔ مرورگرها یا روی همهٔ شبه‌عناصر به درستی کار نمی‌کنند؛ بنابراین تست در مرورگرهای هدف ضروری است.

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

نکات نهایی و بهترین روش‌ها

• همیشه ترکیبی از رویکردها را به کار ببرید تا پوشش مرورگرها بهتر شود.
• برای تعامل لمسی اندازهٔ اسکرول را در دستگاه‌های بدون hover بزرگ‌تر کنید.
• از پوشاندن کامل اسکرول‌بار (overflow: hidden) به عنوان جایگزین طراحی خودداری کنید مگر اینکه جایگزین مناسب (مثلاً دکمه‌های پیمایش) فراهم شود.
• تست واقعی در دستگاه‌ها و ابزارهای کم‌توان (صفحه‌خوان‌ها، تنظیمات بزرگ‌نمایی) انجام دهید.

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

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال