CSS - מדריך לעיצוב פסי גלילה (scrollbars)

יצירת אזורים נגללים בדף HTML ללא שימוש ב - Frames

כולנו מכירים  אתרים שבהם ישנם חלקים נגללים בתוך הדף. בדרך כלל הדבר נעשה באמצעות שימוש באלמנטים כגון <frame> או <iframe> שאינם אהובים על מנועי החיפוש השונים. מה שרבים לא יודעים הוא שבעזרת CSS ניתן ליצור אזורים נגללים בתוך דף HTML ובכך לאפשר לדחוס תוכן רב  (טקסט, תמונות ועוד) לתוך אזור קטן יחסית. תוכן נגלל ייראה למשל כך:


Scrolling box,Scrolling box,Scrolling box,Scrolling box,Scrolling box,Scrolling box,Scrolling box,Scrolling box, Scrolling box,Scrolling box,Scrolling box,Scrolling box,Scrolling box,Scrolling box,Scrolling box,Scrolling box, Scrolling box,Scrolling box,Scrolling box,Scrolling box,Scrolling box,Scrolling box,Scrolling box,Scrolling box, Scrolling box,Scrolling box,Scrolling box,Scrolling box,Scrolling box,Scrolling box,Scrolling box,Scrolling box, Scrolling box,Scrolling box,Scrolling box,Scrolling box,Scrolling box,Scrolling box,Scrolling box,Scrolling box, Scrolling box,Scrolling box,Scrolling box,Scrolling box,Scrolling box,Scrolling box,Scrolling box,Scrolling box

 

כדי ליצור את קופסת התוכן הנגללת המודגמת למעלה השתמשתי בתכונה overflow ובאלמנט מסוג <div>. הקוד ליצירת קופסת התוכן הנגללת שיצרתי בדוגמה למעלה נראה כך:

<div style="height:80px;width:auto;overflow:scroll;">
   Scrolling box,Scrolling box,Scrolling box,Scrolling...
</div>

התכונה overflow שבאמצעותה יצרנו את קופסת התוכן הנגללת יכולה לקבל ערכים שונים שכל אחד מהם גורם להתנהגות אחרת של קופסת התוכן:

תכונה ערכים הסבר
overflow auto במידה והתוכן חורג מגודל הקופסא ייראה פס גלילה - Scrollbar - שבעזרתו ניתן יהיה לגלול את הקופסא ולצפות בתוכן.
hidden ערך זה יגרום לכך שכל התוכן החורג מגבולות הקופסא לא יוצג.
inherit
האלמנט יורש את ערכו מהאלמנט שבתוכו הוא מקנן.
scroll הקופסא תוצג כאשר יהיה לה scrollbar אשר יהיה פעיל במידה והתוכן בקופסא יהיה גדול מהשטח הנראה שלה.
visible במידה והתוכן חורג מיכולת הקופסא להכילו הוא מוצג על ידי הדפדפן מחוץ לגבולות הקופסא.

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

CSS 3.0 מאפשרת לנו לשלוט בפרטי הפרטים של צבעי פסי הגלילה באמצעות שורה של תכונות שיוחדו רק למטרה זו. התכונה הראשונה (ולדעתי השימושית ביותר) שאותה אדגים היא התכונה: scrollbar-base-color שבעזרתה ניתן לשנות את כל צבעי פס הגלילה באמצעות הגדרת צבע אחת. בדוגמת הקוד הבאה אשנה את צבע פס הגלילה לתכלת:

body{scrollbar-base-color:#91C8EA;}

שימוש בשורת הקוד שבדוגמה שלמעלה יגרום למשל לפס הגלילה להיראות כמו באיור הבא:

css scroll-base-color example

לעתים נרצה לקבוע מה יהיה צבעו של כל חלק בפס הגלילה. לשם כך התווספו ב - CSS 3.0 שבע תכונות שיוחדו ממש לכך. מהאיור הבא ניתן ללמוד על כל אחת מהתכונות הללו ועל איזה חלק בפס הגלילה כל אחת מהן משפיעה:


css scrollbar colors illustration

להלן דוגמת קוד העושה שימוש בכל שבע התכונות המומחשות באיור שלמעלה:

<style>
body
{
  scrollbar-arrow-color: #0019C1;
  scrollbar-3dlight-color: #00C603;
  scrollbar-darkshadow-color: #F90057;
  scrollbar-face-color: #00BEC1;
  scrollbar-highlight-color: #EAE600;
  scrollbar-shadow-color: #015900;
  scrollbar-track-color: #A0A500;
}
</style>

שורות הקוד שבדוגמה האחרונה תגרומנה לצביעת פסי הגלילה באופן המומחש באיור הבא:


                                         
css scroll-base-color example


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש