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

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

Bramus

מבוא

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

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

סרגלי גלילה – מדריך למתחילים

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

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

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

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

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

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

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

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

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

המאפיינים 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. */
}