Answer

1. 

   davy.ai

   July 21, 2023 at 10:27 pm

   Solución para desplazarse programáticamente en Cordova/Ionic con window.scrollTo() deshabilitado

   Si te enfrentas al problema de tener el método window.scrollTo() deshabilitado en Cordova/Ionic debido a problemas de rendimiento, no te preocupes. Aquí tienes una solución para desplazarte programáticamente en tu aplicación móvil:

   1. Instala el complemento cordova-plugin-wkwebview-engine en tu proyecto utilizando la CLI de Cordova. Esto permitirá el uso de wkwebview en iOS, que permite opciones de desplazamiento más avanzadas.

   cordova plugin add cordova-plugin-wkwebview-engine
   

   1. Crea un archivo JavaScript personalizado para la funcionalidad de desplazamiento, por ejemplo, scroll.js. En este archivo, define una función para el desplazamiento suave utilizando la API webkit.messageHandlers.

   function scrollToY(y, duration) {
     const element = document.scrollingElement || document.documentElement;
     const startingY = element.scrollTop;
     const diff = y - startingY;
     const easing = t => (t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1);
     let start;
   
     window.webkit.messageHandlers.scroll.postMessage('start'); // Envía una señal de inicio al lado nativo
   
     function step(timestamp) {
       if (!start) { start = timestamp; }
       const time = timestamp - start;
       const percent = Math.min(time / duration, 1);
       element.scrollTo(0, startingY + diff * easing(percent));
       if (time < duration) { window.requestAnimationFrame(step); } // Continúa hasta que termine la duración
       else { window.webkit.messageHandlers.scroll.postMessage('stop'); } // Envía una señal de parada al lado nativo
     }
   
     window.requestAnimationFrame(step);
   }
   

   Esta función utiliza window.webkit.messageHandlers para comunicarse con el lado nativo y comenzar y detener la animación de desplazamiento.

   1. Ahora, en tu aplicación Cordova/Ionic, crea un puente para llamar a esta función desde tu código TypeScript/JavaScript. Por ejemplo:

   declare global {
       interface Window { custom: any; }
   }
   window.custom = {
       scrollToY: (y: number, duration: number) => {
           window.webkit.messageHandlers.scroll.postMessage('setSpeedDuration:' + duration); // Establece la velocidad de la animación de desplazamiento
           window.webkit.messageHandlers.scroll.postMessage('start'); // Comienza a desplazar
           setTimeout(() => {
               window.webkit.messageHandlers.scroll.postMessage('stop'); // Detiene el desplazamiento después de `duration` ms
           }, duration);
           scrollToY(y, duration); // Llama a la función scrollToY personalizada definida anteriormente
       },
   };
   

   Este puente establece la velocidad de la animación de desplazamiento y comienza/detiene el desplazamiento utilizando la API webkit.messageHandlers.

   1. Finalmente, llama a la función window.custom.scrollToY desde tu código de la siguiente manera:

   window.custom.scrollToY(500, 1000); // Desplázate a y=500px en una duración de 1s
   

   ¡Y eso es todo! Con esta solución, puedes desplazarte programáticamente en tu aplicación Cordova/Ionic incluso si el método window.scrollTo() está deshabilitado.

Comments are closed.