עיצוב סרגל הגלילה

אפשר להשתמש במאפיינים scrollbar-width ו-scrollbar-color כדי לעצב סרגלי גלילה.

ברמוס

מבוא

בגרסה 2 של Chrome אפשר לעצב סרגלי גלילה באמצעות הרכיבים המדומים ::-webkit-scrollbar-*. הגישה הזו פועלת בצורה תקינה ב-Chrome וב-Safari, אבל אף פעם לא התבצעו סטנדרטיזציה על ידי קבוצת העבודה של CSS.

המאפיינים שכן הפכו לסטנדרטיים הם 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. */
}