ساخت Scrollbar سفارشی با Preview دو محور
Scrollbar سفارشی در مرورگرها API یکسانی ندارد. این Builder تنظیمات استاندارد و WebKit/Blink را در یک محیط کنار هم قرار می‌دهد تا نتیجه را قبل از استفاده روی هر دو محور ببینید.
در حالت پیشرفته می‌توانید ظاهر محور عمودی و افقی را جدا تنظیم کنید و Corner، Hover و Active State را هم روی Preview واقعی بررسی کنید.
راهنمای استفاده از Scrollbar Builder
این راهنما فقط درباره کار با همین ابزار است؛ از شروع کار تا معنی گزینه‌ها و خواندن خروجی.
این ابزار دقیقاً چه کاری انجام می‌دهد؟
Scrollbar Builder ظاهر Thumb و Track را برای اسکرول عمودی و افقی می‌سازد و تفاوت خروجی استاندارد Firefox و WebKit/Blink را هم نشان می‌دهد.
قبل از شروع این موارد را بدانید
- تصمیم بگیرید دو محور Style مشترک دارند یا مستقل.
- Thumb و Track باید کنتراست کافی داشته باشند.
- Preview هر دو محور را واقعاً Scroll کنید.
قدم‌به‌قدم با ابزار کار کنید
- ۱. حالت محور را انتخاب کنیداگر هر دو محور یک ظاهر دارند «ظاهر مشترک» و اگر متفاوت‌اند حالت مستقل را انتخاب کنید.
- ۲. اندازه و رنگ‌ها را تنظیم کنیدWidth/Height، Thumb، Track و حالت Hover را تغییر دهید.
- ۳. Preview را در هر دو جهت تست کنیداسکرول عمودی و افقی را داخل آزمایشگاه امتحان کنید.
- ۴. CSS را کپی کنیدخروجی کامل یا نسخه Minified را بردارید.
دکمه‌ها، گزینه‌ها و اصطلاحات یعنی چه؟
اگر نام یک گزینه فنی است، این بخش توضیح می‌دهد چه کاری انجام می‌دهد و در کدام بخش ابزار به کارتان می‌آید.
- Thumb
- بخش متحرک Scrollbar.
- Track
- مسیر پس‌زمینه Scrollbar.
- Axis Mode
- مشخص می‌کند دو محور مشترک یا مستقل طراحی شوند.
- Compatibility
- تفاوت خروجی استاندارد Firefox و WebKit/Blink را نشان می‌دهد.
خروجی ابزار را چطور تفسیر کنید؟
خروجی ممکن است ترکیبی از scrollbar-color/scrollbar-width و pseudo-elementهای ::-webkit-scrollbar باشد. همه قابلیت‌ها در همه Browserها یکسان نیستند، بنابراین Compatibility را کنار Code بخوانید.
سوالات رایج
چرا Scrollbar در Firefox و Chrome متفاوت است؟
Firefox از Properties استاندارد محدودتری استفاده می‌کند، در حالی که مرورگرهای WebKit/Blink pseudo-elementهای جزئی‌تری در اختیار می‌گذارند.
آیا می‌توان محور افقی و عمودی را متفاوت کرد؟
در WebKit/Blink بله؛ در fallback استاندارد کنترل‌ها محدودتر هستند.
Scrollbar سفارشی روی موبایل دیده می‌شود؟
بسته به سیستم‌عامل و مرورگر ممکن است Scrollbar به شکل Overlay یا با رفتار متفاوت نمایش داده شود.