Tengo un problema con el desplazamiento horizontal, todo funciona bien en el escritorio, el problema aparece en dispositivos con pantalla táctil (pruebe devtools en modo receptivo). la página comienza a desplazarse verticalmente y hay un problema de disposición extraña de las secciones de la página. Enlace a la página (abrir herramientas de desarrollo y verificar el modo de respuesta) https://thebar.testuj.org.pl/ Mi código de activación de desplazamiento:
export default function Fullpage() { gsap.registerPlugin(ScrollTrigger); useEffect(() => { const sections = gsap.utils.toArray(".slide"); let maxWidth = 0; const getMaxWidth = () => { maxWidth = 0; sections.forEach((section) => { maxWidth += section.offsetWidth; }); }; getMaxWidth(); ScrollTrigger.addEventListener("refreshInit", getMaxWidth); gsap.to(sections, { x: () => `-${maxWidth - window.innerWidth}`, ease: "none", scrollTrigger: { trigger: ".parent", pin: true, scrub: true, end: () => `+=${maxWidth}`, invalidateOnRefresh: true, autoRefreshEvents: "visibilitychange,DOMContentLoaded,load" }, }); }); return ( <div className="parent flex flex-nowrap"> <First /> <Second /> <Third /> <Fourth /> <Fifth /> <Sixth /> <Seventh /> <Eighth /> <Ninth /> <Tenth /> <Eleventh /> </div> ); }