استخدِم السمتَين scrollbar-width
وscrollbar-color
لاختيار نمط أشرطة التمرير.
مقدمة
بدءًا من الإصدار 2 من Chrome، يمكن تصميم أشرطة التمرير باستخدام العناصر الزائفة ::-webkit-scrollbar-*
. تعمل هذه الطريقة بشكل جيد في Chrome وSafari، ولكن لم يتم توحيدها مطلقًا من خلال مجموعة عمل CSS.
لقد تم توحيد السمتَين scrollbar-width
وscrollbar-color
، وهما جزء من مواصفات وحدة تصميم أشرطة الأنماط في CSS. تتوفّر هذه السمات بدءًا من الإصدار 121 من Chrome.
أشرطة التمرير 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. */
}