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

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

מבוא

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

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

תמיכה בדפדפנים

  • Chrome:‏ 121.
  • קצה: 121.
  • Firefox: 64.
  • Safari: לא נתמך.

מקור

סרגלי גלילה 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-* יחולו רק במצב של עכבר מרחף