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

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

Bramus

מבוא

החל מגרסה 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. */
}