ساخت اسکرول‌بار سفارشی

رنگ و عرض دسته و مسیر اسکرول‌بار را با پیش‌نمایش زنده تنظیم کنید و کد ::-webkit-scrollbar را کپی کنید.

عرض اسکرول‌بار: 10px

گردی گوشه: 8px

رنگ مسیر (Track)

رنگ دسته (Thumb)

رنگ دسته در hover

پیش‌نمایش زنده

این یک متن نمونه برای نمایش اسکرول‌بار سفارشی است. اسکرول کنید تا ظاهر دسته و مسیر آن را ببینید. این افکت با ::-webkit-scrollbar روی Chrome، Edge و Safari کار می‌کند.

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

خط سوم متن نمونه — تا انتهای باکس ادامه دارد تا اسکرول واقعی قابل مشاهده باشد.

⚠️ فایرفاکس فقط از scrollbar-width و scrollbar-color پشتیبانی می‌کند و ظاهر آن با کروم/سافاری که از ::-webkit-scrollbar استفاده می‌کنند یکسان نخواهد بود.

کد CSS

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

.scroll-box::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 8px;
}

.scroll-box::-webkit-scrollbar-thumb {
  background: #6366f1;
  border-radius: 8px;
}

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

/* فایرفاکس (پشتیبانی محدودتر از خصوصیات بالا) */
.scroll-box {
  scrollbar-width: thin;
  scrollbar-color: #6366f1 #e5e7eb;
}

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

رنگ و عرض دسته و مسیر اسکرول‌بار را با پیش‌نمایش زنده تنظیم کنید تا کد استایل اسکرول‌بار ساخته و کپی شود.

اسکرول‌بار سفارشی به ظاهر سایت انسجام می‌دهد و می‌تواند با رنگ برند هماهنگ شود، به‌ویژه در سایت‌های تیره.

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

سوالات متداول

آیا استایل اسکرول‌بار روی همه‌ی مرورگرها کار می‌کند؟

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

اسکرول‌بار باریک بسازم یا پهن؟

برای دسترس‌پذیری بهتر است اسکرول‌بار خیلی باریک نباشد تا کاربران راحت آن را بگیرند.

کد را کجا بگذارم؟

کد استایل را در فایل CSS یا بخش استایل صفحه قرار دهید تا روی نوار پیمایش اعمال شود.

ابزارهای مرتبط

ساخت QR Codeاز هر متن یا آدرسی به‌صورت زنده یک QR Code بسازید — با اندازه‌ی دلخواه و خروجی PNG یا SVG.

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

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

رمزنگاری و رمزگشایی Base64متن یا فایل تصویر را به Base64 تبدیل کنید یا رشته‌ی Base64 را به متن اصلی برگردانید.

فرمت‌کننده‌ی JSONJSON را پرتی‌پرینت یا فشرده کنید و در صورت نامعتبر بودن، خط خطا را ببینید.

دیکد کننده JWTتوکن JWT را به Header، Payload و Signature تجزیه کنید و زمان انقضای آن را ببینید.