سبک اسکرول

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

Bramus

مقدمه

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

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

نوارهای پیمایش ۱۰۱

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

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

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

اسکرول بارهای کلاسیک و روکشی

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

نوارهای پیمایش روی هم قرار گرفته

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

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

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

ویژگی‌های 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. */
}