horizontal scroll

assets/js/report.js

@@ -7,6 +7,8 @@ export function report(responsiveSmall) {
     // Initialiser tous les sliders de type before-after
     initSliderBeforeAfter();
 
+    initHorizontalScroll();
+
     // Ne fonctionne que pour les écrans plus grands que responsiveSmall
     if (window.matchMedia(responsiveSmall).matches) {
       // Sur mobile : initialiser les swipers normalement car initMediaDisplay ne sera pas actif
@@ -31,3 +33,80 @@ function initSliderBeforeAfter(container = document){
     }
   });
 }
+
+
+function initHorizontalScroll(){
+  const sections = document.querySelectorAll('.subsection-w-hscroll');
+
+  sections.forEach(function (section) {
+    const wrapper = section.querySelector('.horizontal-scroll-wrapper');
+    if (!wrapper) return;
+
+    // Calculer la largeur totale du contenu horizontal
+    const slides = wrapper.querySelectorAll('.horizontal-scroll-slide');
+    const totalSlidesWidth = Array.from(slides).reduce((acc, slide) => acc + slide.offsetWidth, 0);
+    const endMargin = window.innerWidth * 0.3; // 30vw de marge à la fin
+    const scrollableWidth = totalSlidesWidth - window.innerWidth + endMargin;
+
+    // Définir la hauteur de la section pour créer l'espace de scroll virtuel
+    // La hauteur = viewport + largeur scrollable (pour un ratio 1:1 entre scroll Y et X)
+    const sectionHeight = window.innerHeight + scrollableWidth;
+    section.style.height = `${sectionHeight}px`;
+
+    // Fonction de mise à jour du scroll horizontal
+    function updateHorizontalScroll() {
+      const rect = section.getBoundingClientRect();
+      const stickyContainer = section.querySelector('.horizontal-scroll');
+
+      // Quand le haut de la section atteint le haut du viewport
+      if (rect.top <= 0 && rect.bottom >= window.innerHeight) {
+        // Calculer la progression (0 à 1)
+        const progress = Math.abs(rect.top) / scrollableWidth;
+        const clampedProgress = Math.max(0, Math.min(1, progress));
+
+        // Appliquer le scroll horizontal
+        const translateX = clampedProgress * scrollableWidth;
+        wrapper.style.transform = `translateX(-${translateX}px)`;
+
+        // Fixer le conteneur
+        if (stickyContainer) {
+          stickyContainer.style.position = 'fixed';
+          stickyContainer.style.top = '0';
+          stickyContainer.style.left = '0';
+          stickyContainer.style.width = '100vw';
+        }
+      } else if (rect.top > 0) {
+        // Avant la section : reset
+        wrapper.style.transform = 'translateX(0)';
+        if (stickyContainer) {
+          stickyContainer.style.position = 'relative';
+        }
+      } else {
+        // Après la section : garder à la fin
+        wrapper.style.transform = `translateX(-${scrollableWidth}px)`;
+        if (stickyContainer) {
+          stickyContainer.style.position = 'absolute';
+          stickyContainer.style.top = 'auto';
+          stickyContainer.style.bottom = '0';
+          stickyContainer.style.left = '0';
+          stickyContainer.style.width = '100vw';
+        }
+      }
+    }
+
+    // Écouter le scroll
+    window.addEventListener('scroll', updateHorizontalScroll, { passive: true });
+
+    // Recalculer au resize
+    window.addEventListener('resize', function() {
+      const newTotalWidth = Array.from(slides).reduce((acc, slide) => acc + slide.offsetWidth, 0);
+      const newEndMargin = window.innerWidth * 0.3;
+      const newScrollableWidth = newTotalWidth - window.innerWidth + newEndMargin;
+      const newSectionHeight = window.innerHeight + newScrollableWidth;
+      section.style.height = `${newSectionHeight}px`;
+    });
+
+    // Initial call
+    updateHorizontalScroll();
+  });
+}