סרגלי גלילה מסוג CSS מותאמים אישית ומגניבים: חלון ראווה

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

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

רכיבים של פס גלילה

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

כדי לסגנן פס גלילה אתה צריך להכיר את האנטומיה של פס גלילה. תסתכל על האיור הזה:

שני המרכיבים העיקריים שכדאי לזכור כאן הם:

1. השמיים לעקוב הוא הרקע מתחת לסרגל.
2. השמיים אֲגוּדָל הוא החלק שהמשתמש לוחץ וגורר סביבו.

אנו יכולים לשנות את המאפיינים של סרגל הגלילה המלא באמצעות קידומת הספק::-webkit-scrollbar בוחר. אנחנו יכולים לתת לפס הגלילה רוחב קבוע, צבע רקע, פינות מעוגלות... הרבה דברים! אם אנו מתאימים אישית את סרגל הגלילה הראשי של דף, אז נוכל להשתמש ::-webkit-scrollbar ישירות על אלמנט ה-HTML:

html::-webkit-scrollbar {
  /* Style away! */
}

אם אנו מתאימים אישית תיבת גלילה זו התוצאה של overflow: scroll, אז נוכל להשתמש ::-webkit-scrollbar על האלמנט הזה במקום זאת:

.element::-webkit-scrollbar {
  /* Style away! */
}

הנה דוגמה מהירה שמעצבת את סרגל הגלילה של רכיב ה-HTML כך שיהיה רחב עם רקע אדום:

מה אם נרצה לשנות רק את האגודל או המסלול של פס הגלילה? ניחשתם נכון - יש לנו אלמנטים פסאודו מיוחדים עם קידומת עבור שני אלה: ::-webkit-scrollbar-thumb ו ::-webkit-scrollbar-track, בהתאמה. הנה רעיון של מה אפשרי כשאנחנו מחברים את כל הדברים האלה ביחד:

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

פסי גלילה פשוטים ואלגנטיים

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

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

פסי גלילה מגניבים המושכים את העין

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

עוד אחד…

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