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

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

Bramus

מבוא

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

המאפיינים שעברו סטנדרטיזציה הם scrollbar-width ו-scrollbar-color, שהם חלק ממפרט ברמה 1 של מודולי הגלילה של סרגלי הגלילה ב-CSS. המאפיינים האלה נתמכים החל מגרסה 121 של Chrome.

תמיכה בדפדפן

• 121
• 121
• 64
• x

מקור

סרגלי גלילה 101

המבנה של סרגל גלילה

לכל הפחות, סרגל גלילה מורכב מטראק ואגודל. הטראק הוא האזור שבו האגודל יכול לנוע. הטראק מייצג את כל מרחק הגלילה. האגודל מייצג את המיקום הנוכחי בתוך האזור הניתן לגלילה. בזמן הגלילה, הוא נע בתוך הטראק. לעיתים קרובות ניתן גם לגרור את האגודל.

עם זאת, סרגלי גלילה יכולים לכלול עוד חלקים חוץ מאשר רק האגודל והטראק. לדוגמה, סרגל גלילה יכול לכלול לחצן אחד או יותר כדי להגדיל או להקטין את היסט הגלילה. החלקים שמהם מורכב סרגל גלילה נקבעים לפי מערכת ההפעלה.

איור של החלקים שמרכיבים סרגל גלילה. האיור משמאל הוא סרגל גלילה מינימלי עם טראק ואגודל בלבד. בצד ימין יש גם לחצנים.

סרגלי גלילה קלאסיים ושכבות-על

לפני שמתחילים לעצב סרגלי גלילה, חשוב להבין את ההבדל בין שני סוגים של סרגלי גלילה.

סרגלי גלילה בשכבת-על

סרגלי גלילה בשכבות-על הם סרגלי גלילה צפים שמוצגים מעל לתוכן מתחתיו. הם לא מוצגים כברירת מחדל, אלא רק בזמן שאתם גוללים באופן פעיל. כדי שהתוכן שמתחתיו יהיה גלוי, לרוב הוא שקוף למחצה, אבל מערכת ההפעלה צריכה להחליט על כך. יכול להיות שהגודל שלהם ישתנה גם באינטראקציה איתם.

איור של דפדפן עם סרגל גלילה בשכבת-על. סרגל הגלילה מוצג בשכבת-על של התוכן. הסמל שקוף חלקית.

סרגלי גלילה קלאסיים

סרגלי גלילה קלאסיים הם סרגלי גלילה שממוקמים במרזב ייעודי של סרגלי גלילה. המרזב של סרגל הגלילה הוא הרווח בין קצה הגבול הפנימי לבין השוליים הפנימיים החיצוניים. פסי הגלילה האלה הם בדרך כלל אטומים (לא שקופים) ותרחקים מקום מהתוכן הסמוך.

איור של דפדפן עם סרגל גלילה קלאסי. סרגל הגלילה ממוקם לצד התוכן באזור ייעודי משלו. הרוחב הזמין של התוכן מכווץ בהשוואה לרוחב הזמין כשמשתמשים בסרגלי גלילה בשכבות-על.

הנכסים scrollbar-color ו-scrollbar-width

הוספת צבע של סרגלי גלילה באמצעות scrollbar-color

המאפיין scrollbar-color מאפשר לשנות את ערכת הצבעים של סרגלי גלילה. המאפיין מקבל שני ערכים של <color>. הערך הראשון של <color> קובע את צבע האגודל, והערך השני קובע את הצבע של הטראק.

.scroller {
  scrollbar-color: hotpink blue;
}

כשמשתמשים בסרגל גלילה של שכבת-על, לצבע הטראק אין השפעה כברירת מחדל. עם זאת, לאחר העברת העכבר מעל סרגל הגלילה, הטראק יוצג.

הדגמה: סרגלי גלילה: scrollbar-color

כדי להשתמש ברינדור ברירת המחדל שסופק על ידי מערכת ההפעלה, צריך להשתמש ב-auto כערך.

שינוי הגודל של סרגל הגלילה באמצעות scrollbar-width

המאפיין scrollbar-width מאפשר לבחור סרגל גלילה צר יותר, או אפילו להסתיר את סרגל הגלילה לגמרי בלי להשפיע על יכולת הגלילה.

הערכים הקבילים הם auto, thin ו-none.

• auto: רוחב ברירת המחדל של סרגל הגלילה, כפי שסופק על ידי הפלטפורמה.
• thin: וריאציה דקה של סרגל גלילה שסופקה על ידי הפלטפורמה, או סרגל גלילה מותאם אישית דק יותר מסרגל הגלילה שמוגדר כברירת מחדל בפלטפורמה.
• none: הסתרת סרגל הגלילה ביעילות. עם זאת, עדיין ניתן לגלול את הרכיב.

לא ניתן להשתמש ב-<length> כמו 16px כערך של scrollbar-width.

.scroller {
  scrollbar-width: thin;
}

כשמשתמשים בסרגל גלילה של שכבת-על, האגודל מוצג רק בזמן שגוללים באופן פעיל באזור הניתן לגלילה.

הדגמה: סרגלי גלילה: scrollbar-width

תמיכה בגרסאות דפדפן ישנות יותר

כדי להתאים לגרסאות דפדפן שלא תומכות ב-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);
    }
}

הדגמה: עיצוב סרגלי גלילה באמצעות scrollbar-* עם החלופה ל-::-webkit-scrollbar-*

לתשומת ליבכם: כשמגדירים את 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. */
}

הדגמה: עיצוב סרגלי גלילה באמצעות scrollbar-* עם חלופה ל-::-webkit-scrollbar-*, רק החלת צבעי ::-webkit-scrollbar-* בהעברת העכבר מעל