evento de rolagem javascript para iPhone / iPad?

Não consigo capturar o evento de rolagem em um iPad. Nada disso funciona, o que estou fazendo de errado?

window.onscroll=myFunction;

document.onscroll=myFunction;

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

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

Todos eles funcionam até mesmo no Safari 3 no Windows. Ironicamente, TODOS os navegadores no PC são compatíveis, window.onload=caso você não se importe em destruir os eventos existentes. Mas não vá no iPad.

O iPhoneOS captura onscrolleventos, exceto da maneira que você espera.

O movimento panorâmico de um dedo não gera nenhum evento até que o usuário pare - um onscrollevento é gerado quando a página para de se mover e é redesenhada - conforme mostrado na Figura 6-1.

Da mesma forma, a rolagem com 2 dedos dispara onscrollsomente depois que você parar de rolar.

A maneira usual de instalar o manipulador funciona, por exemplo

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

(Consulte também https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html )

Para iOS, você precisa usar o evento touchmove , bem como o 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
}

Desculpe por adicionar outra resposta a uma postagem antiga, mas normalmente recebo um evento de rolagem muito bem usando este código (funciona pelo menos no 6.1)

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

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

E isso funciona para mim. A única coisa que ele não faz é fornecer um evento de rolagem para a desaceleração da rolagem (assim que a desaceleração for concluída, você obtém um evento de rolagem final, faça o que quiser com ele.) Mas se você desabilitar a inércia com css ao fazer isso

-webkit-overflow-scrolling: none;

Você não fica com inércia em seus elementos, para o corpo, embora você possa ter que fazer o clássico

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

Consegui obter uma ótima solução para esse problema com iScroll, com a sensação de rolagem dinâmica e tudo mais https://github.com/cubiq/iscroll O documento do github é ótimo, e eu o segui na maior parte. Aqui estão os detalhes da minha implementação.

HTML: envolvi a área rolável do meu conteúdo em alguns divs que o iScroll pode usar:

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

CSS: Usei a classe Modernizr para "toque" para direcionar minhas alterações de estilo apenas para dispositivos de toque (porque eu só instanciei o iScroll no toque).

.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 do download do iScroll e, em seguida, inicializei o scroller como abaixo, em que updatePosition é minha função que reage à nova posição de rolagem.

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

Você tem que usar myScroller para obter a posição atual agora, em vez de olhar para o deslocamento da rolagem. Aqui está uma função tirada de http://markdalgleish.com/presentations/embracingtouch/ (um artigo muito útil, mas um pouco desatualizado agora)

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}; 
}

A única outra pegadinha era que ocasionalmente eu perdia parte da minha página que estava tentando acessar, e ela se recusava a rolar. Eu tinha que adicionar algumas chamadas a myScroller.refresh () sempre que alterava o conteúdo do #wrapper, e isso resolveu o problema.

EDIT: Outra pegadinha foi que o iScroll come todos os eventos de "clique". Ativei a opção de fazer com que o iScroll emita um evento de "toque" e lidei com eles em vez de eventos de "clique". Felizmente, não precisei de muitos cliques na área de rolagem, então isso não era grande coisa.

Desde que o iOS 8 foi lançado, esse problema não existe mais. O evento de rolagem agora é disparado sem problemas no iOS Safari também.

Portanto, se você registrar o scrollmanipulador de eventos e verificar window.pageYOffsetdentro desse manipulador de eventos, tudo funcionará perfeitamente.