ראשיאודותטיוליםצילוםfull Stack
Yosefus FlaviusYosefus Flavius

Yosefus flavius

אני בעצמי

קישורים מהירים

  • דף הבית
  • אודות
  • בלוג
logo

© 2025 Yosefus Flavius WebDeveloper

איך לגרום לגלילה בציר X לעצור בדיוק על כרטיסים עם CSS בלבד - מדריך מקיף עם טיפים ומידע שימושי

איך לגרום לגלילה בציר X לעצור בדיוק על כרטיסים עם CSS בלבד

  1. בית
  2. >
  3. Full Stack
4 באפריל 2024• זמן קריאה: 2 דקות

לפני שהולכים לאכול אבטיח עם תיבול של חול ים 🇮🇱, הנה טיפ קריר לגלילת כרטיסים ב־CSS: איך לגרום לגלילה בציר X לעבור חלק כרטיס-כרטיס, בלי לחשב פיקסלים ובלי כאב ראש מיותר. נשתמש ב־scroll-snap-type: x mandatory; על הקונטיינר, וב־scroll-snap-align: start; על הכרטיסים. פשוט, קליל ומושלם לקרוסלות, דפדוף בין PDFים או כל מקרה אחר שבו לא רוצים לראות "חצי פריט" במסך.

סוף שבוע וכולנו כבר מתחילים להריח את החופש, הים, הגלים המשובחים שנתברכו בהם ארצות לא שלנו, והאבטיח עם המרקם הקרנצ'י והמפנק של חול ים כמיטב המסורת הארצישראלית. ♥ אז לפני שמורידים את הרגל מהגז והולכים להירגע בכיף. אמרתי בוא נוריד להם איזה 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 ועוד מקרים מוזרים ☹. קחו את הסופ"ש לעצמכם, תאהבו את עצמכם, תעשו תרגילי נשימה ומדיטציה, ובעיקר תתבטלו בנחת ♥ (אם יש לכם ילדים קטנים האכלת יד תשכחו מכל הסעיף הזה).

linkedin
whatsapp
facebook
x
Y

Yosefus Flavius

כותב הבלוג

כתבות קשורות

כתבות דומות

CSS Mix-blend-mode: איך לשלב תוכן עם הרקע
27 באפריל 2025
Full Stack>>פרונט אנד

CSS Mix-blend-mode: איך לשלב תוכן עם הרקע

בפוסט הזה נלמד על שימוש ב־mix-blend-mode ב־CSS, טכניקת עיצוב מגניבה שמאפשרת לשלב את התוכן של האלמנט עם הרקע והאב בצורה מרהיבה ומיוחדת.

@apply ב־Tailwind: מה זה ואיך להשתמש בזה נכון
27 באפריל 2025
Full Stack>>פרונט אנד

@apply ב־Tailwind: מה זה ואיך להשתמש בזה נכון

@apply ב־Tailwind מאפשר לאחד מספר קלאסים לקלאס אחד, אבל יש לזה יתרונות וחסרונות. למדו איך להשתמש בזה בצורה חכמה ומתי כדאי להימנע.

כל מה שצריך לדעת על צבעים ב־Tailwind CSS: טיפים, טריקים ואינטואיציה ️
27 באפריל 2025
Full Stack>>פרונט אנד

כל מה שצריך לדעת על צבעים ב־Tailwind CSS: טיפים, טריקים ואינטואיציה ️

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