
איך לגרום לגלילה בציר X לעצור בדיוק על כרטיסים עם CSS בלבד
סוף שבוע וכולנו כבר מתחילים להריח את החופש, הים, הגלים המשובחים שנתברכו בהם ארצות לא שלנו, והאבטיח עם המרקם הקרנצ'י והמפנק של חול ים כמיטב המסורת הארצישראלית. ♥ אז לפני שמורידים את הרגל מהגז והולכים להירגע בכיף. אמרתי בוא נוריד להם איזה css על הראש כדי שלא יהנו מדיי. ⚠ והפעם - 👨👩👧👦
תיאור הבעיה:
כשיש גלילה לצד (ציר הx ) של כרטיסים. ואנחנו רוצים למנוע שיהיה מצב של חצי כרטיס בתצוגה, ורוצים שאפשר יהיה לגלול רק בצ'אנקים של כרטיס שלם. יצורף codepen בתגובות שבו במסך קטן כל כרטיס יתפוס את כל רוחב העמוד - ובמסך גדול 300 פיקסלאות.
הפיתרון: 🦄
למצוא בעזרת js את המיקום של הדף הנוכחי על ציר הx של המסך. ואז לעשות scroll לתחילת המסך בעזרת חישוב פשוט של פיקסלים.
אז איך זה עובד? 🤯
אנחנו צריכים זכוכית מגדלת ושריון של ארמדיל, ואז נספור פיקסלים שיש פיזית במסך על ציר הx. ואז נכפיל אותם בפאי (מסיבות מובנות) ואז נפסיק לקרוא שטויות שאני כותב ונשתמש בשני ערכים בלבד שיש בcss שעושים את זה אוטומטית. על הcontainer : scroll-snap-type: x mandatory; * אפשר לשנות לציר הy אם הגלילה ללמטה. על הitem : scroll-snap-align: start; * אפשר לשנות לcenter או משבלכם לפי הצורך - במקרה שלנו שכל אחד מהאלמנטים הוא 100% מהמסך start זה מעולה. זה דיי שמיש במקרה באמת של קרוסלות של דפי pdf ועוד מקרים מוזרים ☹. קחו את הסופ"ש לעצמכם, תאהבו את עצמכם, תעשו תרגילי נשימה ומדיטציה, ובעיקר תתבטלו בנחת ♥ (אם יש לכם ילדים קטנים האכלת יד תשכחו מכל הסעיף הזה).
Yosefus Flavius
כותב הבלוג