استایلدهی ریسپانسیو اسکرولبار فقط برای دسکتاپ
مرورگرهای موبایل مثل Safari (iOS) و Chrome (Android) معمولاً اسکرولبار رو پنهان میکنن یا بهصورت یه لایهی شفاف نشون میدن، برای همین CSS customization توی اونها اعمال نمیشه پس تمرکز ما الان روی تغییر اسکرول بار نسخه دسکتاپ هست. در تصویر زیر یه قبل و بعد انجام تغییرات رو میتونید ببینید که اسکرول بار در سمت راست کاملا تغییر کرده.
برای اینکه تجربهی کاربری موبایل تمیز و یکنواخت بمونه و خرابکاری اتفاق نیفته، میتونی با یه media query ساده، استایل سفارشی اسکرولبار رو فقط به صفحههای دسکتاپ محدود کنی:
@media (min-width: 1024px) {
:root {
--scrollbar-track: #292929;
--scrollbar-thumb: #fff9b1;
}
html {
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb);
border-radius: 6px;
}
}
کجا باید این کد رو بذاری؟
میتونی با خیال راحت این قطعهکد CSS رو داخل بخش WordPress Dashboard → Appearance → Customize → Additional CSS قرار بدی، یا اگه خواستی، توی فایل اصلی استایل قالب یعنی style.css هم میتونی اضافهاش کنی.
شخصی سازی رنگهای اسکرول بار مثل آب خوردن
چون از CSS variables استفاده کردیم، فقط با ویرایش این دو خط توی کدها میتونی ظاهرش رو عوض کنی:
:root {
--scrollbar-track: #111;
--scrollbar-thumb: #00bcd4;
}
اگر لازمه و بخوای بدونی توی این کدها:
- track در واقع همون ناحیهی پسزمینهست که اسکرولبار روی اون حرکت میکنه
- thumb هم اون بخش قابلکشیدنه که نشون میده الان صفحه تا کجای محتوا اسکرول شده
میتونی هر وقت خواستی این دو تا کد رنگ رو تغییر بدی، بدون اینکه لازم باشه به بقیهی کد دست بزنی.
