سبک اسکرول

برای استایل دادن به نوارهای پیمایش از ویژگی های scrollbar-width و scrollbar-color استفاده کنید.

Bramus

معرفی

از نسخه 2 کروم، امکان استایل دادن به نوارهای پیمایش با ::-webkit-scrollbar-* شبه عناصر وجود دارد. این رویکرد در کروم و سافاری به خوبی کار می کند، اما هرگز توسط گروه کاری CSS استاندارد نشده است.

آنچه استاندارد شد، ویژگی‌های scrollbar-width و scrollbar-color است که بخشی از مشخصات ماژول سطح 1 استایل نوارهای پیمایش CSS است. این ویژگی‌ها در Chrome 121 پشتیبانی می‌شوند.

نوارهای پیمایش 101

آناتومی یک نوار پیمایش

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

هر چند نوارهای پیمایش می توانند بخش های بیشتری از انگشت شست و مسیر داشته باشند. به عنوان مثال، یک نوار اسکرول می تواند یک یا چند دکمه برای افزایش یا کاهش افست اسکرول داشته باشد. قسمت هایی که یک نوار اسکرول را تشکیل می دهند توسط سیستم عامل زیرین تعیین می شوند.

نوارهای پیمایش کلاسیک و روکش

قبل از بررسی نحوه استایل دادن به نوارهای اسکرول، مهم است که تمایز بین دو نوع اسکرول را درک کنید.

روکش نوارهای پیمایش

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

نوارهای پیمایش کلاسیک

میله های پیمایش کلاسیک اسکرول میله هایی هستند که در یک ناودان اسکرول مخصوص قرار می گیرند. ناودان نوار پیمایش فضای بین لبه حاشیه داخلی و لبه لایه بیرونی است. این اسکرول‌بارها معمولاً مات هستند (شفاف نیستند) و مقداری فضا را از محتوای مجاور می‌گیرند.

ویژگی های scrollbar-color و scrollbar-width

دادن رنگ به نوارهای پیمایش با scrollbar-color

ویژگی scrollbar-color به شما امکان می دهد طرح رنگ نوارهای اسکرول را تغییر دهید. ویژگی دو مقدار <color> را می پذیرد. اولین مقدار <color> رنگ انگشت شست را تعیین می کند و مقدار دوم رنگ مورد استفاده برای آهنگ را تعیین می کند.

.scroller {
  scrollbar-color: hotpink blue;
}

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

برای استفاده از رندر پیش فرض ارائه شده توسط سیستم عامل، از auto به عنوان مقدار آن استفاده کنید.

تغییر اندازه نوار پیمایش با scrollbar-width

ویژگی scrollbar-width به شما امکان می‌دهد نوار اسکرول باریک‌تری را انتخاب کنید یا حتی نوار اسکرول را کاملاً بدون تأثیر بر قابلیت اسکرول مخفی کنید.

مقادیر پذیرفته شده auto ، thin و none هستند.

• auto : عرض پیش‌فرض نوار اسکرول که توسط پلتفرم ارائه شده است.
• thin : نوع نازکی از نوار پیمایش ارائه شده توسط پلتفرم، یا نوار پیمایش سفارشی نازکتر از نوار پیمایش پلت فرم پیش فرض.
• none : به طور موثر نوار اسکرول را پنهان می کند. اگرچه این عنصر همچنان قابل پیمایش است.

استفاده از <length> مانند 16px به عنوان مقدار برای scrollbar-width امکان پذیر نیست.

.scroller {
  scrollbar-width: thin;
}

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

پشتیبانی از نسخه های قدیمی مرورگر

برای تهیه نسخه‌های مرورگری که scrollbar-color و scrollbar-width پشتیبانی نمی‌کنند، می‌توانید از ویژگی‌های جدید scrollbar-* و ::-webkit-scrollbar-* استفاده کنید.

.scroller {
    --scrollbar-color-thumb: hotpink;
    --scrollbar-color-track: blue;
    --scrollbar-width: thin;
    --scrollbar-width-legacy: 10px;
}

/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
    .scroller {
        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
        scrollbar-width: var(--scrollbar-width);
    }
}

/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
    .scroller::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color-thumb);
    }
    .scroller::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track);
    }
    .scroller::-webkit-scrollbar {
        max-width: var(--scrollbar-width-legacy);
        max-height: var(--scrollbar-width-legacy);
    }
}

توجه داشته باشید که وقتی width یا height ::-webkit-scrollbar تنظیم می کنید، یک نوار پیمایش همپوشانی همیشه نمایش داده می شود که عملاً آن را به یک اسکرول کلاسیک تبدیل می کند.

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

.scroller::-webkit-scrollbar-thumb {
    background: transparent;
}
.scroller::-webkit-scrollbar-track {
    background: transparent;
}
.scroller:hover::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color-thumb);
}
.scroller:hover::-webkit-scrollbar-track {
    background: var(--scrollbar-color-track);
}

.scroller:hover {
    --fix: ; /* This custom property invalidates styles on hover, thereby enforcing a style recomputation. This is needed to work around a bug in Safari. */
}