פסי גלילה מותאמים אישית הופכים פופולריים יותר בימינו.
ישנן סיבות שונות מדוע להתאים אישית סרגל גלילה.
לדוגמה, סרגל הגלילה המוגדר כברירת מחדל יכול לגרום לממשק המשתמש של האפליקציה להיראות לא עקבי על פני מערכות הפעלה מרובות, וכאן נוכל לקבל את היתרון של סגנון מאוחד.
מבוא
הדבר הראשון שנסביר הוא הרכיבים או החלקים של פס גלילה.
פס גלילה מכיל את המסלול ואת הנגלל.
Scrollbar Track & Scrollbar Thumb
הנה תמונה שמראה אותם:
המסלול הוא הבסיס של סרגל הגלילה, כאשר הנגלל הוא מה שהמשתמש גורר כדי לגלול בתוך עמוד או קטע.
יש לזכור שפס גלילה יכול לעבוד אופקית או אנכית, בהתאם לעיצוב.
כמו כן, זה יכול להשתנות תוך כדי עבודה על אתר רב לשוני שפועל גם בכיוונים משמאל לימין (LTR) וגם מימין לשמאל (RTL).
איך ליצור פס גלילה מותאם אישית
עכשיו כשאנחנו מבינים את הבסיס, אפשר לקפוץ לחלק המהנה של ההדרכה.
כעת נלמד את מאפייני ה-CSS השונים הזמינים לשימוש עבור עיצוב פס הגלילה.
בחלק השני ניישם ארבעה סוגים שונים של פסי גלילה כדי לתת כמה רעיונות להכנת פסי גלילה מעוצבים אישית.
מאפייני CSS לעיצוב פס גלילה
למרבה הצער, לא קיימת עדיין תמיכה סטנדרטית בין דפדפנים לעיצוב פסי גלילה עם CSS.
לדפדפנים מבוססי Firefox ו-Webkit כמו Chrome, Edge ו-Safari יש מאפיינים שונים לעיצוב.
הדרכה זו תתמקד בעיקר בדפדפני Webkit, מכיוון שהם מציעים אפשרויות נוספות לעיצוב, אך אנו נסקור בקצרה גם את Firefox.
מאפייני עיצוב CSS של Webkit עבור פסי גלילה
::-webkit-scrollbar /*כל פס הגלילה*/
::-webkit-scrollbar-track /*כל אזור סרגל ההתקדמות של פס הגלילה*/
::-webkit-scrollbar-thumb /*החלק הניתן לגרירה של סרגל הגלילה*/
/*האופציות הבאות זמינות לשימוש אך לא מתבצע בהן שימוש בדרך כלל*/
::-webkit-scrollbar-button /*כפתורי למעלה ולמטה בקצוות של פס הגלילה*/
::-webkit-scrollbar-track-piece /*החלק בפס הגלילה שלא מכוסה על ידי הנגלל*/
::-webkit-scrollbar-corner /*הפינה התחתונה שבה פסי גלילה אופקיים ואנכיים נפגשים*/
מאפייני עיצוב CSS של Firefox עבור פסי גלילה
יש כרגע שני מאפייני CSS זמינים לעיצוב פסי גלילה בפיירפוקס.
scrollbar-width /*שולט ברוחב פס הגלילה, כאשר רק שתי אפשרויות זמינות - thin & auto*/
scrollbar-color /*לוקח שני צבעים המשמשים לצביעה של הנגלל והמסלול של סרגל הגלילה בסדר זה*/
כעת, כשאנחנו מכירים את האפשרויות להתאמה אישית של פסי גלילה, בואו ניישם אותן עם כמה דוגמאות.
פס גלילה לערכת נושא כהה
היצמדות לסרגל הגלילה של ברירת המחדל של הדפדפן עלולה להיות צורמת למשתמשים מכיוון שהיא לא כל כך מתאימה לאתר בעל ערכת נושא כהה.
בואו נשתמש בידע החדש שלנו ב-CSS כדי ליצור סרגל גלילה לערכת נושא כהה:
html::-webkit-scrollbar {
width: 20px;
}
html::-webkit-scrollbar-track {
background-color: black;
}
html::-webkit-scrollbar-thumb {
background: #4e4e4e;
border-radius: 25px;
}
התוצאה שנקבל היא מסלול שחור ונגלל בצבע אפור כהה.
דוגמאות נוספות לפסי גלילה מתקדמים
כאן תוכלו לראות דוגמאות לפסי גלילה מעוצבים בהתאמה אישית ומעט מורכבים יותר מאשר הדוגמא מעלה.
החלק שרלוונטי לנו נמצא בכרטיסיית CSS בחלק השמאלי העליון של החלון.
העיצובים הרלוונטים לנו מתחילים בID style-1 וכן הלאה.
See the Pen CSS Scroll Bars by Ghost Rider (@GhostRider) on CodePen.
לסיכום
אנחנו מקווים שאתם יוצאים מההדרכה הזאת מעט חכמים יותר וכשאתם יודעים איך לעצב לעצמכם פס גלילה ללא הרבה מאמץ.
אם יש לכם שאלות נוספות, תרגישו חופשי להשאיר תגובה ונשתדל לענות לכם בהקדם.
