חיפוש ]

עיצוב פסי גלילה (Scrollbars) עם CSS

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

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

אך לשמחתנו בספטמבר 2018 שוחררה טיוטה של W3C הנקראית CSS Scrollbars והיא נראית כדרך מעשית וטובה להשיג זאת.

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

אגב, במהלך השנים הופיעו המון דרכים לעשות זאת ו Internet Explorer הייתה הראשונה לספק CSS API עבור עיצוב פסי גלילה. אך מפתחים רבים היו מתוסכלים בחיפוש אחר פתרון כולל ולבסוף יצרו  פתרונות Javascript שונים.

Fast Forward לימינו, ועכשיו כש- Internet Explorer מתחלפת לאיטה ל Microsoft Edge על מנוע של כרום, האפשרויות לעיצוב פסי הגלילה מצמצמות לשתי גישות CSS:

  • Chrome/Edge/Safari – על ידי שימוש ב -webkit-scrollbar
  • Firefox – עושה שימוש ב CSS Scrollbars API החדש (scrollbar-color ו scrollbar-width).

בואו נראה מספר דוגמאות…

פסי גלילה ב Chrome/Edge/Safari

עיצוב פסי הגלילה בדפדפנים אלו אפשרי עם שימוש ב vendor prefix הנקרא -webkit-scrollbar:

body::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}
body::-webkit-scrollbar-track {
  background: #fbfaf8;        /* color of the tracking area */
}
body::-webkit-scrollbar-thumb {
  background-color: #2d2d2d;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid #fbfaf8;  /* creates padding around scroll thumb */
}

אך ישנן חדשות טובות וחדשות רעות… החדשות הטובות הן שהקוד יעבוד מצויין בגירסאות האחרונות של Chrome/Edge/Safari. החדשות הרעות הן שספסיפיקציות אלו ננטשו לאחרונה על ידי W3C וניתן לצפות כי אלו יפסיקו לעבוד בשנים הקרובות.

פסי גלילה ב Firefox

פיירפוקס ידועים כאלו הראשונים לאמץ את הסטנדרטים של W3C. כעת, הפיצ׳רים החדשים של CSS Scrollbars כבר קיימים בגירסאות Firefox:

body {
  scrollbar-width: thin;          /* "auto" or "thin"  */
  scrollbar-color: #2d2d2d #fbfaf8;   /* scroll thumb & track */ 
}

תענוג! כנראה ושמתם לב למספר הבדלים ביחס לשימוש בספסיפקציה של -webkit-scrollbar הננטשת. הראשון הוא שזה הרבה יותר תמציתי ונעים לעין. השני הוא שאין אפשרות ליצור padding ו border-radius עבור ה "track thumb". עם זאת, פיצ׳רים אלו לבטח יתווספו בעתיד הלא רחוק…

אז במה עלינו להשתמש?

אז מה בעצם עלינו לעשות כשאין API יחיד בוא כל הדפדפנים משתמשים? פשוט משלבים את שתי הגישות שהזכרנו:

/* The emerging W3C standard
   that is currently Firefox-only */
* {
  scrollbar-width: thin;
  scrollbar-color: #2d2d2d #fbfaf8;
}

/* Works on Chrome/Edge/Safari */
*::-webkit-scrollbar {
  width: 12px;
}
*::-webkit-scrollbar-track {
  background: #fbfaf8;
}
*::-webkit-scrollbar-thumb {
  background-color: #2d2d2d;
  border-radius: 20px;
  border: 3px solid #fbfaf8;
}

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

 

רועי יוסף
רועי יוסף

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

2 תגובות...
  • עמנואל 31 מרץ 2020, 12:34

    ומה עם העיצוב של פס הגלילה במובייל?

    • רועי יוסף 31 מרץ 2020, 15:05

      זו שאלה טובה עמנואל 🙂 לא בדקתי לעומק, אך לא נראה לי שזה רלוונטי למובייל..

תגובה חדשה

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