javascript - tag - Deslizamiento sobre el tema móvil(Iphone)

video html5 safari

Question

Cuando deslizo hacia abajo / arriba mi sitio web en el móvil, la primera diapositiva tiene errores, parece que se desliza en la dirección correcta y luego vuelve unos pocos px a la otra dirección (pero solo la primera diapositiva en NUEVA dirección tiene este problema). Creo que lo mejor es probarlo en un teléfono móvil: https://even-mind.com

¿Cómo puedo arreglarlo? Espero que me puedan ayudar chicos!

Por el momento, lo único que encontré es eliminar el script owl-carousel.js, para que el deslizamiento sea suave pero, por supuesto, el carrusel no funciona, lo puedes ver aquí: https://dev.even-mind.com/Even-Mind

(probado en iphone 5)

Answer 1

Al buscar en el inspector de elementos de DOM, puede descubrir que al desplazarse hacia abajo la posición del encabezado cambia de absolute a fixed y tal vez esto es lo que causa el problema.

Este es el encabezado antes de desplazarse:

<div id="header" class="header">

y después de desplazarse:

<div id="header" class="header header-fixed header-prepare">

Intenta cambiar el HTML y dale a tu encabezado una posición fixed desde el principio:

<div id="header" class="header header-fixed">

Answer 2

Bueno, veo el desplazamiento de buggy / laggy cuando llego a la diapositiva "SOMOS".

Puede ser que las animaciones de los textos fadingIn comiencen desde allí y lo que hace que tenga errores, mis recomendaciones son:

1- Mueva todas sus etiquetas <link> y <script> en la parte inferior de su HTML, justo después de </body> para permitir que el navegador cargue primero los elementos HTML y luego los enlaces y scripts.

2- Considere eliminar animaciones, guiones, enlaces, etc. innecesarios. Por ejemplo, no veo el punto de estas animaciones fadeIn en todo el texto. Si los tiene solo para hacer que el sitio web sea elegante, no es un problema, pero recomiendo usar animaciones solo para el desempeño de la experiencia del usuario. Ejemplo: use fadeIn o cualquier tipo de animación en un elemento específico que desee que el usuario vea. La animación hace que los ojos le presten atención y el usuario verá la animación de inmediato y prestará atención a la información.

3- Como siempre, minimice / comprima sus scripts, CSS e imágenes.

4- G-zip

5- Usa GTmetrix.com para ver todo lo que está mal en tu sitio web

Veré más su código y veré si hay algún problema con el código.

Editar:

Consulte aquí: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Feven-mind.com%2F&tab=mobile

Y aquí: https://gtmetrix.com/reports/even-mind.com/uVHRlGCl

NOTA: Su sitio web es de 3.04 MB de tamaño, considere hacer las instrucciones anteriores + las instrucciones de los enlaces.

Answer 3

Como puede ver en la vista de la línea de tiempo de DevTools, hay muchas marcas rojas en la parte superior. Esto indica cuadros lentos. En cuanto a las capturas de pantalla, puedes ver fácilmente que hay algo desagradable en el desplazamiento en sí.

Mirando un poco más profundo, hay 2 funciones activadas con el evento de scroll :

1. El primero, Function Call from polyfill.js, que delega la ejecución de la función a requestAnimationFrame (que es bueno)
2. El segundo, Function Call to jQuery que ejecuta la función inmediatamente.

Lo que puede hacer para mejorar su perf de scroll es delegar la función 2 a requestAnimationFrame . En una forma más simple puedes ir con algo como esto:

$(window).scroll(function() {
  requestAnimationFrame(someFunctionUpdatingDOM);
})

La otra cosa es el almacenamiento en caché de variables. La función que calcula la posición del encabezado atraviesa DOM cada vez que se invoca. Dado que las operaciones de DOM son bastante caras, es mejor evitarlas si no es necesario.

var $header = $(''.header''); // traverse DOM once, cache variable for later use in function

function someFunctionUpdatingDOM() {
  $header.addClass(''something'');
}

Una cosa más que he notado es que también hay problemas de rendimiento de desplazamiento en la vista de escritorio, causados ​​por los repintados extensos de la imagen de fondo. Esto se debe a un script que cambia background-position para lograr un efecto de paralaje. En general, es una mejor idea utilizar transformaciones CSS, como translate3d() , que son aceleradas por hardware. De esta manera, los navegadores pueden programar transformaciones de capa (imagen) a GPU, omitiendo repintados innecesarios, haciendo que la página se desplace sin problemas.

Buena suerte con las correcciones!

Answer 4

Puede ser que el navegador móvil tenga solo algunos problemas con la manipulación del evento scroll. Intente usar una función de rebote para limitar el número de cálculos en su desplazamiento para hacer una animación más suave y tal vez resolver su problema de desplazamiento.

La función de rebote limita el número de veces que se llama a una función. Muy útil para eventos de desplazamiento, etc.

Un ejemplo básico (del blog de David Walsh): https://davidwalsh.name/javascript-debounce-function

 function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

Puedes usarlo en tu sitio como tal.

var handyScrollFunction = debounce(function() {
    // put your scroll/parallax in here
}, 250);

window.addEventListener(''scroll'', handyScrollFunction);

Puedes jugar con el tiempo de espera para asegurarte de que el desplazamiento aún sea suave.