que - evento de desplazamiento de javascript para iPhone/iPad?

instalar javascript

Question

Parece que no puedo capturar el evento de desplazamiento en un iPad. Ninguno de estos funciona, ¿qué estoy haciendo mal?

window.onscroll=myFunction;

document.onscroll=myFunction;

window.attachEvent("scroll",myFunction,false);

document.attachEvent("scroll",myFunction,false);

Todos funcionan incluso en Safari 3 en Windows. Irónicamente, TODOS los navegadores de la PC son compatibles con window.onload= si no te importa atrapar los eventos existentes. Pero no ve en el iPad.

Answer 1

El iPhoneOS captura eventos onscroll , excepto de la manera que usted espera.

La panorámica con un solo dedo no genera ningún evento hasta que el usuario deja de panoramizar onscroll se genera un evento de desplazamiento en el onscroll cuando la página deja de moverse y se vuelve a dibujar, como se muestra en la Figura 6-1.

Del mismo modo, desplácese con 2 dedos onscroll solo después de que haya detenido el desplazamiento.

La forma habitual de instalar el controlador funciona, por ejemplo

window.addEventListener(''scroll'', function() { alert("Scrolled"); });
// or
$(window).scroll(function() { alert("Scrolled"); });
// or
window.onscroll = function() { alert("Scrolled"); };
// etc 

(Ver también https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html )

Answer 2

Para iOS necesitas usar el evento touchmove así como también el evento scroll como este:

document.addEventListener("touchmove", ScrollStart, false);
document.addEventListener("scroll", Scroll, false);

function ScrollStart() {
    //start of scroll event for iOS
}

function Scroll() {
    //end of scroll event for iOS
    //and
    //start/end of scroll event for other browsers
}

Answer 3

Perdón por agregar otra respuesta a una publicación anterior, pero usualmente obtengo un evento de desplazamiento muy bien usando este código (funciona al menos en 6.1)

element.addEventListener(''scroll'', function() {
    console.log(this.scrollTop);
});

// This is the magic, this gives me "live" scroll events
element.addEventListener(''gesturechange'', function() {});

Y eso funciona para mí. Lo único que no hace es dar un evento de desplazamiento para la desaceleración del desplazamiento (una vez que se completa la desaceleración se obtiene un evento de desplazamiento final, haga lo que haga con él) pero si desactiva la inercia con css haciendo esto

-webkit-overflow-scrolling: none;

No obtienes inercia en tus elementos, para el cuerpo, aunque es posible que tengas que hacer el clásico

document.addEventListener(''touchmove'', function(e) {e.preventDefault();}, true);

Answer 4

Pude obtener una gran solución a este problema con iScroll, con la sensación de desplazamiento de impulso y todo https://github.com/cubiq/iscroll El documento de github es genial, y lo seguí principalmente. Aquí están los detalles de mi implementación.

HTML: envolví el área desplazable de mi contenido en algunos divs que iScroll puede usar:

<div id="wrapper">
  <div id="scroller">
    ... my scrollable content
  </div>
</div>

CSS: utilicé la clase Modernizr para "tocar" para apuntar mis cambios de estilo solo a los dispositivos táctiles (porque solo instalé iScroll al tacto).

.touch #wrapper {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
.touch #scroller {
  position: absolute;
  z-index: 1;
  width: 100%;
}

JS: Incluí iscroll-probe.js desde la descarga de iScroll, y luego inicié la barra de desplazamiento como a continuación, donde updatePosition es mi función que reacciona a la nueva posición de desplazamiento.

# coffeescript
if Modernizr.touch
  myScroller = new IScroll(''#wrapper'', probeType: 3)
  myScroller.on ''scroll'', updatePosition
  myScroller.on ''scrollEnd'', updatePosition

Tienes que usar myScroller para obtener la posición actual ahora, en lugar de mirar el desplazamiento de desplazamiento. Aquí hay una función tomada de http://markdalgleish.com/presentations/embracingtouch/ (un artículo súper útil, pero un poco desactualizado ahora)

function getScroll(elem, iscroll) {   
  var x, y;

  if (Modernizr.touch && iscroll) {
    x = iscroll.x * -1;
    y = iscroll.y * -1;   
  } else {
    x = elem.scrollTop;
    y = elem.scrollLeft;   
  }

  return {x: x, y: y}; 
}

El único otro gotcha era ocasionalmente perdería parte de mi página a la que estaba intentando desplazarme, y se negaría a desplazarse. Tuve que agregar algunas llamadas a myScroller.refresh () cada vez que cambiaba el contenido de la #wrapper, y eso resolvió el problema.

EDITAR: Otro problema fue que iScroll se come todos los eventos de "hacer clic". Active la opción para que iScroll emita un evento "tap" y los administre en lugar de eventos "click". Afortunadamente, no necesité mucho hacer clic en el área de desplazamiento, así que esto no fue un gran problema.