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

استخدِم السمتَين scrollbar-width وscrollbar-color لتنسيق أشرطة التمرير.

Bramus

مقدمة

بدءًا من الإصدار الثاني من Chrome، أتحنا تصميمًا لأشرطة التمرير باستخدام العناصر الزائفة البالغ عددها ::-webkit-scrollbar-*. تعمل هذه الطريقة بشكل جيد في Chrome وSafari، إلا أنّها لم توحِّدها أبدًا من قِبل CSS Working Group.

أما السمات الموحّدة، فهي scrollbar-width وscrollbar-color، وهي جزء من مواصفات المستوى 1 من وحدة نمط أشرطة التمرير في 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. */
}