התאמה אישית של הצבע או העובי של פס הגלילה

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

• ‫scrollbar-color: מקבל שני ערכים של <color>. הראשון חל על הלחצן (החלק שזז), והשני על המסילה (הרקע הקבוע).
• scrollbar-width: מקבל את הערכים auto (ברירת המחדל), thin (גרסה דקה יותר) או none (הסתרת פס הגלילה לחלוטין תוך שמירה על יכולת הגלילה).

החלת scrollbar-color ו-scrollbar-width

חובה: צריך להשתמש ב-scrollbar-color וב-scrollbar-width בקונטיינר שניתן לגלילה.

כשמשתמשים ב-scrollbar-color, צריך להשתמש במשתני CSS כדי להפריד בין הצבעים של פס הגלילה והידית, כדי לשפר את הקריאוּת ואת יכולת התחזוקה (במיוחד כשמשתמשים בערכי ברירת מחדל).

.scroller {
  --scrollbar-thumb: var(--color-neutral-70);
  --scrollbar-track: var(--color-neutral-90);

  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

אסטרטגיות חלופיות

תמיכה בדפדפנים ובמצבי חוסר זמינות של scrollbar-color

התכונה הזו היא שיפור הדרגתי (progressive enhancement) ולא תמיד נדרשים לה פתרונות חלופיים.

אם העיצוב חשוב והיעד של המשתמש ב-Baseline הוא "Baseline Widely Available" או גרסה קודמת, כדאי לכלול את הרכיבים המדומים הלא סטנדרטיים של ::-webkit-scrollbar כחלופות.

כדאי לעטוף את רכיבי ה-fallback מדור קודם בבלוק @supports not (scrollbar-color: auto) כדי למנוע התנגשויות בין מאפיינים סטנדרטיים לבין בוררי WebKit מדור קודם בדפדפנים שתומכים בשניהם באופן מקורי.

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

/* Legacy fallback for WebKit/Blink browsers */
@supports not (scrollbar-color: auto) {
  .scroller::-webkit-scrollbar {
    /* Must define base size in WebKit for custom colors to be visual */
    width: 12px;
    height: 12px;
  }

  .scroller::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }

  .scroller::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}