نمط شريط التمرير

استخدِم السمتَين 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. */
}