iPhone / iPadのJavaScriptスクロールイベント？

iPadでスクロールイベントをキャプチャできないようです。これらのどれも動作しません、私は何を間違っていますか？

window.onscroll=myFunction;

document.onscroll=myFunction;

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

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

これらはすべてWindows上のSafari 3でも機能します。皮肉なことに、PC上のwindow.onload=すべてのブラウザーは、既存のイベントを壊してかまわない場合にサポートされます。しかし、iPadで行くことはできません。

iPhoneOSはonscrollイベントをキャプチャしますが、予想した方法とは異なります。

onscroll図6-1に示すように、1本指のパンでは、ユーザーがパンを停止する（ページの移動と再描画が停止するとイベントが生成される）まで、イベントは生成されません。

同様に、2本指でのスクロールは、スクロールをonscroll停止した後にのみ発生します。

ハンドラーをインストールする通常の方法は機能します。

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

（https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.htmlも参照してください）

iOSの場合は、touchmoveイベントとscrollイベントを次のように使用する必要があります。

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
}

古い投稿に別の回答を追加して申し訳ありませんが、私は通常、このコードを使用してスクロールイベントを非常にうまく取得します（少なくとも6.1で機能します）。

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

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

そして、それは私にとってはうまくいきます。それがしない唯一のことは、スクロールの減速のためにスクロールイベントを与えることです（減速が完了したら、最終的なスクロールイベントを取得します、それを行うのと同じようにしてください）。

-webkit-overflow-scrolling: none;

あなたは古典的なことをしなければならないかもしれませんが、身体のために、あなたの要素に慣性を得ません

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

私は運動量スクロールし、すべての感覚で、iScrollで、この問題に対する最適なソリューションを得ることができたhttps://github.com/cubiq/iscroll githubのドキュメントは素晴らしいですし、私はほとんどそれに続きました。これが私の実装の詳細です。

HTML： iScrollが使用できるいくつかのdivでコンテンツのスクロール可能な領域をラップしました：

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

CSS： 私は「タッチ」にModernizrクラスを使用して、スタイルの変更をタッチデバイスのみにターゲティングしました（タッチ時にインスタンス化されるのはiScrollのみであるため）。

.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： iScrollダウンロードからiscroll-probe.jsをインクルードしてから、以下のようにスクローラーを初期化しました。ここで、updatePositionは、新しいスクロール位置に反応する私の関数です。

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

現在の位置を取得するには、スクロールオフセットではなく、myScrollerを使用する必要があります。これは、http：//markdalgleish.com/presentations/embracingtouch/から取得した関数です（非常に役立つ記事ですが、現在は少し古くなっています）。

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

他の唯一の問題は、スクロールしようとしていたページの一部が失われることがあり、スクロールを拒否することでした。#wrapperの内容を変更するたびにmyScroller.refresh（）への呼び出しを追加する必要があり、それで問題が解決しました。

編集：もう1つの問題は、iScrollがすべての「クリック」イベントを食べることです。iScrollに「タップ」イベントを発生させ、「クリック」イベントではなくそれらを処理するオプションをオンにしました。ありがたいことに、スクロール領域をあまりクリックする必要がなかったので、これは大した問題ではありませんでした。

iOS 8が出たので、この問題はもうありません。スクロールイベントがiOS Safariでもスムーズに発生するようになりました。

したがって、scrollイベントハンドラーを登録してそのイベントハンドラーwindow.pageYOffset内をチェックすると、すべてが正常に機能します。