אפשר להשתמש במאפיינים scrollbar-width
ו-scrollbar-color
כדי לעצב סרגלי גלילה.
מבוא
החל מגרסה 2 של Chrome, ניתן היה לעצב סרגלי גלילה עם פסאודו-אלמנטים ::-webkit-scrollbar-*
. הגישה הזו פועלת בצורה תקינה ב-Chrome וב-Safari, אבל אף פעם לא תוכננה על ידי קבוצת העבודה של שירותי ה-CSS.
המאפיינים שעברו סטנדרטיזציה הם scrollbar-width
ו-scrollbar-color
, שהם חלק ממפרט ברמה 1 של מודולי הגלילה של סרגלי הגלילה ב-CSS. המאפיינים האלה נתמכים החל מגרסה 121 של Chrome.
סרגלי גלילה 101
המבנה של סרגל גלילה
לכל הפחות, סרגל גלילה מורכב מטראק ואגודל. הטראק הוא האזור שבו האגודל יכול לנוע. הטראק מייצג את כל מרחק הגלילה. האגודל מייצג את המיקום הנוכחי בתוך האזור הניתן לגלילה. בזמן הגלילה, הוא נע בתוך הטראק. לעיתים קרובות ניתן גם לגרור את האגודל.
עם זאת, סרגלי גלילה יכולים לכלול עוד חלקים חוץ מאשר רק האגודל והטראק. לדוגמה, סרגל גלילה יכול לכלול לחצן אחד או יותר כדי להגדיל או להקטין את היסט הגלילה. החלקים שמהם מורכב סרגל גלילה נקבעים לפי מערכת ההפעלה.
![איור של החלקים שמרכיבים סרגל גלילה.](https://developer.chrome.com/static/docs/css-ui/scrollbar-styling/image/scrollbar-props-1.png?authuser=5&hl=he)
סרגלי גלילה קלאסיים ושכבות-על
לפני שמתחילים לעצב סרגלי גלילה, חשוב להבין את ההבדל בין שני סוגים של סרגלי גלילה.
סרגלי גלילה בשכבת-על
סרגלי גלילה בשכבות-על הם סרגלי גלילה צפים שמוצגים מעל לתוכן מתחתיו. הם לא מוצגים כברירת מחדל, אלא רק בזמן שאתם גוללים באופן פעיל. כדי שהתוכן שמתחתיו יהיה גלוי, לרוב הוא שקוף למחצה, אבל מערכת ההפעלה צריכה להחליט על כך. יכול להיות שהגודל שלהם ישתנה גם באינטראקציה איתם.
![איור של דפדפן עם סרגל גלילה בשכבת-על.](https://developer.chrome.com/static/docs/css-ui/scrollbar-styling/image/scrollbar-props-2.png?authuser=5&hl=he)
סרגלי גלילה קלאסיים
סרגלי גלילה קלאסיים הם סרגלי גלילה שממוקמים במרזב ייעודי של סרגלי גלילה. המרזב של סרגל הגלילה הוא הרווח בין קצה הגבול הפנימי לבין השוליים הפנימיים החיצוניים. פסי הגלילה האלה הם בדרך כלל אטומים (לא שקופים) ותרחקים מקום מהתוכן הסמוך.
![איור של דפדפן עם סרגל גלילה קלאסי.](https://developer.chrome.com/static/docs/css-ui/scrollbar-styling/image/scrollbar-props-3.png?authuser=5&hl=he)
הנכסים 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-*
בהעברת העכבר מעל