css מאפייני scroll

מאפייני scroll

להלן רשימת המאפיינים המתחילים בקידומת scroll

scroll-initial-target
המאפיין scroll-initial-target
scroll-margin
המאפיין scroll-margin מציין את המרחק בין מיקום ההצמדה למיכל.

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

מיקום ההצמדה הוא המיקום על רכיב הצאצא שבו הוא נצמד למקומו במיכל כאשר אתה מפסיק לגלול.
scroll-margin-block
המאפיין scroll-margin-block מאפיין מציין את המרחק בכיוון הבלוק, בין מיקום ההצמדה למיכל.

משמעות הדבר היא שכאשר תפסיק לגלול, הגלילה תתכוונן במהירות ותיעצר במרחק מוגדר בכיוון הבלוק, בין מיקום ההצמדה למיכל.
scroll-margin-block-end
המאפיין scroll-margin-block-end מציין את המרחק בכיוון הבלוק, בין מיקום ההצמדה למיכל.
scroll-margin-block-start
המאפיין scroll-margin-block-start מציין את המרחק בכיוון הבלוק, בין מיקום ההצמדה למיכל .
scroll-margin-bottom
המאפיין scroll-margin-bottom מציין את המרחק בין מיקום ההצמדה למיכל.
scroll-margin-inline
המאפיין scroll-margin-inline מציין את המרחק בכיוון המוטבע, בין מיקום ההצמדה למיכל.
scroll-margin-inline-end
המאפיין scroll-margin-inline-end מציין את המרחק בכיוון המוטבע, בין מיקום ההצמדה למיכל.
scroll-margin-inline-start
המאפיין scroll-margin-inline-start מציין את המרחק בכיוון המוטבע, בין מיקום ההצמדה למיכל.
scroll-margin-left
המאפיין scroll-margin-left מציין את המרחק בכיוון המוטבע, בין מיקום ההצמדה למיכל.
scroll-margin-right
המאפיין scroll-margin-right מציין את המרחק בין מיקום ההצמדה למיכל.
scroll-margin-top
המאפיין scroll-margin-top מציין את המרחק בין מיקום ההצמדה למיכל.
scroll-marker-group
המאפיין scroll-marker-group
scroll-padding
המאפיין scroll-padding מציין את המרחק מהמיכל למיקום ההצמדה של רכיבי צאצא.
scroll-padding-block
המאפיין scroll-padding-block מגדיר את המרחק בכיוון הבלוק, מהמכל למיקום ההצמדה ברכיבי הצאצא.
scroll-padding-block-end
המאפיין scroll-padding-block-end מציין את המרחק בכיוון הבלוק מקצה המיכל למיקום ההצמדה ברכיבי הצאצא.
scroll-padding-block-start
המאפיין scroll-padding-block-start מציין את המרחק בכיוון הבלוק מתחילת המיכל למיקום ההצמדה ברכיבי הצאצא.
scroll-padding-bottom
המאפיין scroll-padding-bottom מציין את המרחק מתחתית המיכל למיקום ההצמדה ברכיבי הצאצא.
scroll-padding-inline
המאפיין scroll-padding-inline מציין את המרחק בכיוון המוטבע מהמיכל למיקום ההצמדה ברכיבי הצאצא.
scroll-padding-inline-end
המאפיין scroll-padding-inline-end מציין את המרחק בכיוון המוטבע מקצה המיכל למיקום ההצמדה ברכיבי הצאצא.
scroll-padding-inline-start
המאפיין scroll-padding-inline-start מציין את המרחק בכיוון המוטבע מתחילת המיכל למיקום ההצמדה ברכיבי הצאצא.
scroll-padding-left
המאפיין scroll-padding-left מציין את המרחק מהצד השמאלי של המיכל למיקום ההצמדה ברכיבי הצאצא.
scroll-padding-right
המאפיין scroll-padding-right מציין את המרחק מהצד הימני של המיכל למיקום ההצמדה ברכיבי הצאצא.
scroll-padding-top
המאפיין scroll-padding-top מציין את המרחק מהחלק העליון של המיכל למיקום ההצמדה ברכיבי הצאצא.
scroll-snap-align
המאפיין scroll-snap-align מציין היכן אלמנטים ייכנסו לפוקוס כאשר תפסיק לגלול.
scroll-snap-stop
המאפיין scroll-snap-stop בעת החלקה מהירה על משטח עקיבה או מסך מגע, המאפיין scroll-snap-stop מציין אם לגלול מעבר לרכיבים או לעצור ולהצמיד את הרכיב הבא.
scroll-snap-type
המאפיין scroll-snap-type מציין כיצד האלמנטים ייכנסו לפוקוס כאשר תפסיק לגלול, ובאיזה כיוון.
scroll-target-group
המאפיין scroll-target-group
scroll-timeline
המאפיין scroll-timeline משמש להגדרת ציר זמן בעל שם שמניע את ההתקדמות של סרגל הגלילה במיכל. לאחר מכן מופנה השם בהצהרת ציר זמן של אנימציה כדי לציין את הרכיב של המיכל המשמש להנעת התקדמות האנימציה באמצעות פעולת הגלילה.

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

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

בהנפשה של ציר זמן גלילה, התקדמות האנימציה נקבעת על ידי מיקום פס גלילה ולא זמן או ממד אחר. המאפיין scroll-timeline-name מגדיר שם שניתן להשתמש בו כדי לזהות אלמנט כמקור של ציר זמן גלילה; ה- scroll-timeline-axis מגדיר את כיוון סרגל הגלילה במיכל שיספק את ציר הזמן.

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

ניתן להגדיר את המאפיין scroll-timeline-axis (ו- scroll-timeline-name) באמצעות מאפיין הקיצור של ציר הזמן גלילה.
scroll-timeline-name
המאפיין scroll-timeline-name משמש להגדרת ציר זמן בעל שם שמניע את ההתקדמות של סרגל הגלילה במיכל. לאחר מכן מופנה השם בהצהרת ציר זמן של אנימציה כדי לציין את הרכיב של המיכל המשמש להנעת התקדמות האנימציה באמצעות פעולת הגלילה.

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

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

ניתן להגדיר את המאפיין scroll-timeline-name (ו- scroll-timeline-axis) באמצעות המאפיין מקצר ציר זמן גלילה.