ios - personalizar - El desplazamiento de Div se congela a veces si uso-webkit-overflow-scrolling

webkit overflow hidden

Question

si uso -webkit-overflow-scrolling para un div desplazable, se desplaza perfectamente con momentum nativo. Pero, el div mismo a veces se congela y no responde, mi dedo se mueve. Después de 2-3 segundos más tarde, vuelve a ser desplazable.

No sé cómo estoy reproduciendo este problema. Pero, como veo, hay dos comportamientos principales que crean esta situación.

Primero, si espero un momento, por ejemplo 20 segundos, y toco el div, no responde. Espero unos segundos y vuelve a funcionar.

En segundo lugar, toco varias veces rápidamente, y luego, se congela, y de nuevo, después de unos segundos más tarde, vuelve a funcionar.

¿Cómo puedo evitar este congelamiento?

Answer 1

Este es un tema abierto cuyo enlace se puede encontrar aquí número en ios

Una de las soluciones a este problema se puede encontrar aquí en este enlace de github

De acuerdo con los problemas encontrados en los enlaces de GitHub publicados anteriormente, se pueden rastrear algunos pasos para eliminar el problema de desplazamiento.

• Comente las siguientes dos líneas en el ionic.js

  self.el.style.overflowY = ''hidden'';
  
  self.el.style.overflowX = ''hidden'';

• Utilice cordova.plugins.Keyboard.disableScroll(true) para desplazarse por el teclado sin interrupciones

• $ionicConfigProvider.scrolling.jsScrolling(true) Establezca esto en true en la parte config.

• Además, en algunas circunstancias, overflow-scroll está configurado como "oculto" pero no lo vuelve a establecer como "scroll", lo que hace que la pantalla se congele.

Espero que te pueda ayudar.

/ * Medidas necesarias para mí, esto excluye la respuesta * /

/ * Por la presente, declaro la atribución completa a las páginas publicadas de github indicadas en el enlace anterior * /

Answer 2

Para mí, la congelación era repetible y sucedía cuando intentaba desplazarme hacia arriba o hacia abajo cuando ya estaba en la parte superior o inferior, respectivamente. La solución fue agregar algunos oyentes para touchstart y touchmove y detectar estos casos y event.preventDefault() on ''em.

Algo como lo siguiente, donde .scroller es el div que realmente se desplazará (cambia a scrollTop ).

var lastY = 0; // Needed in order to determine direction of scroll.
$(".scroller").on(''touchstart'', function(event) {
    lastY = event.touches[0].clientY;
});

$(''.scroller'').on(''touchmove'', function(event) {
    var top = event.touches[0].clientY;

    // Determine scroll position and direction.
    var scrollTop = $(event.currentTarget).scrollTop();
    var direction = (lastY - top) < 0 ? "up" : "down";

    // FIX IT!
    if (scrollTop == 0 && direction == "up") {
      // Prevent scrolling up when already at top as this introduces a freeze.
      event.preventDefault();
    } else if (scrollTop >= (event.currentTarget.scrollHeight - event.currentTarget.outerHeight()) && direction == "down") {
      // Prevent scrolling down when already at bottom as this also introduces a freeze.
      event.preventDefault();
    }

    lastY = top;
});

¡Espero que esto ayude a la próxima pobre alma que se encuentre con este horrible error! ¡Buena suerte y sigue luchando!

Answer 3

Utilicé el siguiente código, creo que está funcionando.

var scrollTimer;
$(''.scroller'').on(''scroll'',function(e){
      clearTimeout(scrollTimer);
      scrollTimer = setTimeout(() => {
        this.scrollTop = Math.max(1, Math.min(this.scrollTop, this.scrollHeight - this.clientHeight - 1));
      }, 300);
});