איך מעצבים את סרגל הגלילה באתר בעזרת CSS?

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

מה זה סרגל גלילה באתר?

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

מאלו חלקים מורכב סרגל הגלילה?

במאמר הזה אני מתייחסת ל3 חלקים עיקריים בפס הגלילה:

  1. המיכל – הקופסא שמכילה את כל פס הגלילה. היא כוללת בתוכה את המסלול ואת הידית.
  2. המסלול – הוא פס הגלילה שאנו רואים. חלקו מוסתר ע"י הידית, וחלקו גלוי. לחיצה אקראית בחלק הגלוי, מקפיצה לנקודה אחרת בדף.
  3. הידית – בה אפשור "לאחוז" ע"י לחיצה והחזקה בעכבר, ולגלול את הדף במהירות לכל חלק בעמוד.

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

איפה מכניסים את הקוד לעיצוב סרגל הגלילה?

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

הדרך הקלה היא להוסיף את הקוד בהתאמה אישית של התבנית. בלוח הבקרה לוחצים על עיצוב > התאמה אישית > הדף עובר אוטומטית לתצוגה מקדימה, ונפתח חלון בצד ימין > לוחצים על css מותאם > מדביקים את הקוד (או מקלידים, עדיף…)

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

עיצוב סרגל הגלילה בעזרת קוד css

חשוב לי להדגיש כי הקוד בcss עושה רק חלק מהעבודה: הוא יעצב לכם יפה את פס הגלילה בגוגל כרום. בפיירפוקס הוא יעצב בצורה חלקית, ועל אקספלורר הוא בכלל לא ישפיע

נתחיל מהגדרת רוחב פס הגלילה כולו:

::-webkit-scrollbar {
  width: 18px;
}

בשלב הבא, נעצב את המסלול של פס הגרירה בצבע אפור בהיר:

::-webkit-scrollbar-track {
  background: #E7E5E8;
}

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

::-webkit-scrollbar-thumb {
  background: #7175D8;
  border: 2px solid #E7E5E8;
}

עכשיו נעצב את צבע הידית במעבר עכבר:

::-webkit-scrollbar-thumb:hover {
   background: #4F52AF;
}

סיימנו. עכשיו סרגל הגלילה מעוצב בצורה אלגנטית ונקיה.

בונת אתרים, רוצה להיות אלופה?

קבלי טיפים שווים וסודות מקצועיים,
ישירות לתיבת המייל שלך : )

תגובה אחת

  1. עכשיו ניסיתי עוד אופציות עם עוד צבעים, יש גם אפשרות לעגל את הגלילה, רק לא הצלחתי עדיין. תקשיבי זה נפלא!! אוהבת לשחק עם האפשרויות!

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

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