איך לבטל גלילה הצידה בדפי אלמנטור? הסוף לבעיה הזאת 😅

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

השלב הראשון – איתור הגורם לתקלה

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

אז מה עושים כדי לאתר בקלות את האלמנט הבעייתי? מצאתי פעם באינטרנט טריק חמוד!
נוסיף לעמוד, תחת הגדרות> מתקדם את הcss הבא:

* {
	border: solid 1px black;
}
Code language: CSS (css)

הקוד הזה יוסיף לנו מסגרת בולטת לכל האלמנטים בדף (לא להיבהל!) וככה נוכל לגלול את הדף ולאתר בקלות יחסית את האלמנט שזז לנו הצידה.

עכשיו תראו כמה הבעיה בולטת – איך ה״מסגרת״ של האלמנט מסגירה אותו כשהיא חורגת מחוץ לרוחב העמוד:

הסברנו את הבעיה, עכשיו פתרונות

1. נגדיר לאלמנט רוחב ״בתוך השורה״ כדי לוודא שהוא לא יחרוג מרוחב העמוד (יעבוד מעולה במקרים כמו זה שבדוגמא שלי).
2. נגדיר לכל האיזור תחת ׳פריסה׳, גלישה: ׳מוסתר׳ והבעיה תיפתר. (לא תמיד עובד).

כשאני לא מצליחה לפתור את הבעיה באף אחת מהדרכים האלו, או כשאני רוצה פשוט ״לשים פלסטר״ ולתת פיתרון שאני יודעת שהוא אמנם לא לגמרי יסודי, אבל בהחלט מהיר ויציב, אני מוסיפה להגדרות העמוד (לחיצה על הכפתור הגדרות הקטן מצד ימין למטה בפאנל של אלמנטור > מתקדם > css מותאם) את הcss הבא:

html, body {
	overflow-x: hidden;
}
Code language: CSS (css)