גלילה רוחבית נגררת באלמנטור

התוצאה הסופית (איזור נגלל לרוחב, לחצו וגררו את האיזור ימינה ושמאלה):

השלבים:

  1. יצירת קונטיינר עם תוכן נגלל
  2. הוספת css & js

1. יצירת איזור

1. ניצור באלמנטור קונטיינר חדש ונגדיר אותו בכוון שורה ו no wrap:

בנוסף ניתן לקונטיינר אבא (עוטף התוכן) קלאס בשם hscroll, ונוסיף את ה CSS הבא: 

				
					selector.hscroll {
        overflow: auto;
        scrollbar-width: none;
        cursor: grab;
    }

הערה – בתור התחלה כשעוד עובדים על התוכן עדיף לראות את הפס גלילה, לכן בתור התחלה עדיף למחוק או לשים בהערה את שורה מספר 2, ואז בסוף העבודה נחזיר אותו כדי להסתיר את הפס גלילה

2. בתוך הקונטיינר נוסיף את התוכן שיגלל, אבל קריטי מאוד לדעת מתי לבטל או להשתמש grow לכל האלמנטים שהם בתוכן

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

אבל אם נרצה שכל תמונה תתפוס את מלא הרוחב של הקונטיינר נרצה לבחור ב grow, כי אז שנשכפל את התמונה הוא יהיה חייב ליצור גלילה רוחבית

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

אז אחרי שקבענו לתוכן אם לגדול או לא, אז נעבור לשלב הבא

2. הוספת קוד JS

נשים ווידג'ט html ונדביק:
שימו לב לשורה 3 (לקלאס hscroll)

				
					<script>
    // Get the parent container
    var dragScroll = document.querySelector('.hscroll');

    // Variables to store mouse position
    var isMouseDown = false;
    var startX;
    var scrollLeft;

    // Event listener for mouse down
    dragScroll.addEventListener('mousedown', function (e) {
        isMouseDown = true;
        startX = e.pageX - dragScroll.offsetLeft;
        scrollLeft = dragScroll.scrollLeft;
        e.preventDefault(); // Prevent default only within .hscroll
    });

    // Event listener for mouse leave
    dragScroll.addEventListener('mouseleave', function () {
        isMouseDown = false;
    });

    // Event listener for mouse up
    dragScroll.addEventListener('mouseup', function () {
        isMouseDown = false;
    });

    // Event listener for mouse move
    dragScroll.addEventListener('mousemove', function (e) {
        if (!isMouseDown) return;
        e.preventDefault(); // Prevent default only within .parent-images
        var x = e.pageX - dragScroll.offsetLeft;
        var walk = (x - startX) * 2;
        dragScroll.scrollLeft = scrollLeft - walk;
    });
</script>
				
			
				
					<script>
    // Get all parent containers with the class 'hscroll'
    var dragScrollContainers = document.querySelectorAll('.hscroll');

    // Loop through each container
    dragScrollContainers.forEach(function(dragScroll) {
        // Variables to store mouse position
        var isMouseDown = false;
        var startX;
        var scrollLeft;

        // Event listener for mouse down
        dragScroll.addEventListener('mousedown', function (e) {
            isMouseDown = true;
            startX = e.pageX - dragScroll.offsetLeft;
            scrollLeft = dragScroll.scrollLeft;
            e.preventDefault(); // Prevent default only within .hscroll
        });

        // Event listener for mouse leave
        dragScroll.addEventListener('mouseleave', function () {
            isMouseDown = false;
        });

        // Event listener for mouse up
        dragScroll.addEventListener('mouseup', function () {
            isMouseDown = false;
        });

        // Event listener for mouse move
        dragScroll.addEventListener('mousemove', function (e) {
            if (!isMouseDown) return;
            e.preventDefault(); // Prevent default only within .hscroll
            var x = e.pageX - dragScroll.offsetLeft;
            var walk = (x - startX) * 2;
            dragScroll.scrollLeft = scrollLeft - walk;
        });
    });
</script>

שאלות?