מבוא ל CSS גלילה הצמד נקודות

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

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

עם זאת, כאשר מדובר המתאם בין קידוד וגלילה, רק JavaScript נראה שיש כל שליטה על האחרון. זה היה כל כך הרבה זמן, אבל עם הקדמה של נקודות הצמד לגלול, CSS החל להתעדכן.

גלילה ללא נקודות הצמדה

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

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

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

גלול עם נקודות הצמדה לגלילה

זה המקום שבו אנחנו מביאים נקודות הצמדה של גלילה ב- CSS. השם הוא מובן מאליו; זה תקן CSS המאפשר לנו הצמד פריטים למקומו בעת גלילה.

יש חמישה מאפייני CSS המהווים תקן זה:

1. גלילה- snap-type
2. גלול- snap-point-x
3. גלול- snap-point-y
4. גלילה- snap-coordinate
5. גלילה- snap היעד

תמיכה בדפדפן

הנכס צורך -WebKit ו -גברת קידומות עבור הדפדפנים הרלוונטיים. נכון לכתוב מאמר זה, גלילה CSS גלילה אינו נתמך ב- Chrome וב- Opera.

שים לב כי ארבעת המאפיינים האחרונים צפויים ליפול על ידי סוכני המשתמש בעתיד הקרוב. במקום זאת, נכסים חדשים, כלומר גלילה- snap ליישר, גלילה- snap-margin, ו גלילה- snap-padding, עשוי להיווצר, כהגדרתה במפרט זה.

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

נכסים

אתה צריך תוסיף את ה גלילה- snap-type רכוש למגש הגלילה (אלמנט המכולה שילדיו גדושים בזמן שהוא מגלגל). זה מציין את קפדנות של פעולה הצמד. זה יכול לקחת שלושה ערכים:

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

ה גלול- snap-point-x ו גלול- snap-point-y נכסים שייכים למכל הגלילה, מדי. הם מתייחסים לנקודות על ציר x ו- y שבו נקודות הצמד יהיו קיימות. הערך שלהם הוא נתון על ידי חזור() פונקציה. לדוגמה, אם ברצונך להוסיף נקודות הצמדה לאורך ציר ה- x בזמן המרווח של 100px אתה צריך להשתמש scroll-snap-point-x: לחזור (100px) הכלל.

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

אתה יכול להשתמש גלילה- snap-coordinate רכוש בשיתוף עם גלילה- snap היעד. עליך להוסיף אותו לרכיבי הילד של הגורם המכיל. זה מגדיר את הקואורדינטות של אלמנטים של הילד, כי יהיה ליישר עם קואורדינטות היעד של מיכל הגלילה שלהם כאשר המשתמש מגלול את המסך.

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

קוד לדוגמה

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

 div width: 300px; גובה: 300px; overflow: auto; ... div> img width: 250px; גובה: 150px; ... 

עכשיו אנחנו להוסיף כמה נקודות למגש הגלילה:

 div width: 300px; overflow: auto; גלילה- snap-point-y: חזור (150px); גלילה- snap-type: חובה;  

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