web-dev-qa-db-ja.com

iOSのSafariでスクロール中にスクロール位置を監視するにはどうすればよいですか？

私は現在$(window).bind('scroll', foo);を使用して$(window).scrollTop()を監視し、視差効果を作成するためにさまざまなことをしています。

すべてのデスクトップブラウザーで、ユーザーがスクロールするピクセルごとにfoo()が呼び出されます。 iOSのSafariでは、スクロールが終了した後にのみスクロールイベントが発生します。

IOSでスワイプ中に関数が呼び出されるようにするために$(window).bind('touchmove', foo);を追加しました。ユーザーが指を離すと、ページはスクロールし続けますが、イベントの発生は停止します。

何か案は？

javascriptiossafaridom-eventsparallax
26
tkalve

「Skrollr」JavaScriptライブラリの使用を強くお勧めします。これは、私がこれまで見つけた中で最高のモバイルスクロールアニメーションオプションであり、すばやく簡単に起動して実行できます。アニメーションを作成し、スクロールの開始位置と終了位置に基づいてCSSを操作します。ほとんどの標準CSSプロパティに必要な数のデータスクロール位置とアニメーションを作成します。

次の例では、背景色が500ピクセルのスクロールの過程でアニメーション化されます。

<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div>

Gitでリポジトリをチェックアウトします： https://github.com/Prinzhorn/skrollr

Skrollrデモの例： http://prinzhorn.github.io/skrollr/

素晴らしい現実の例： http://www.fontwalk.de/03/

4
negrelja

私があなたの質問を見たとき、私はこれのためにポリフィルをすることを計画していました（もしそれが存在しないなら？）。残念ながら、私にはほとんど時間がありませんでした。

アイデアは、setIntervalを開始することです。これはontouchstartで開始され、document.body.scrollTopは前回から変更されています。 20ミリ秒ごと。そうであれば、手動でscrollイベントを送出します。それ以外の場合は、明らかにスクロールが発生していないため、clearIntervalです。

これは簡単です。 （私よりも）時間に余裕がある場合は、これらのガイドラインを試してみてください。

編集：さて、さらに読むと、同じアイデアが他の回答でも提案されているようです。 iPadでスクロールしている間、インターバルが停止していることは確かですか？

4
zvona

AppleのiPhone 5cのWebページでは、指を画面に触れたままスクロールしてもスクロールし続けるように見える視差スクロール効果を使用しています。そのため、スクロール中はJavaScriptを完全に無効にすることはできません。 Tumult Hypeもこの機能を提供しています。

2
Gaz

これはそのままでは不可能ですが、いわば、 iscroll を使用して実行できます。

したがって、iOSのiScrollとAndroidモバイルデバイス/タブレット）を使用し、デスクトップデバイスの現在の方法を使用します。

iScrollには、「onScrollMove」、「onBeforeScrollEnd」、「onTouchEnd」などの特定のイベントで呼び出されるコールバック関数の多くのオプションがあります。残念ながら、「すべての位置変更（変更を含む）」でコールバックを実行するオプションはありませんユーザーが画面へのタッチを停止した後のスクロールの勢いが原因です。」しかし、追加するのは簡単です。

IScrollソースの127行目付近の「// Events」コメントの近くに、新しい変数を追加します。

onPosChange: null

次に、308行目あたりの「_pos」関数の最後に、次の行を追加します。

if (this.options.onPosChange) this.options.onPosChange.call();

（「onPosChange」オプションに渡された関数が存在する場合は、それを呼び出すだけです）。

それが完了すると、次のコード例はid = "iscroll_container"を使用してdivのiScrollを設定し、変更するたびにYオフセットをコンソールに出力します。

var myScroll;
function loaded() {
    myScroll = new iScroll('iscroll_container', { onPosChange: actOnScroll });
}

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

//Use this for high compatibility (iDevice + Android)
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

function actOnScroll(){
    console.log('got a scroll move! Vert offset is: ' + myScroll.y);
}

注、 Ben the Bodyguard Parallax Site はiPadでiScrollを使用して動作します（iscrollのはるかに古いバージョンを使用しており、ここで説明したとおりに実行しません）。

また、 Life of Pi Parallax Site はiPadで非常にうまく動作します-どのように動作するかはわかりませんが、少なくともそれが可能であることを証明しています！

1
joshua.paling

私が知っているように、ほとんどのモバイルデバイスでスクロールしている間、JavaScriptの実行はありません。いくつかの回避策（iscrollなど）があります。 Iscrollはcss-technique "transform"を使用しています。ただし、スクロール中にJavaScriptを実行する方法はありません。スムーズスクロールアルゴリズムは高すぎると思います。

0
Andreas Dyballa

これはjQuery自体のバグである可能性があります： http://bugs.jquery.com/ticket/6446

このチケットはしばらくオープンしていて、iOS 4に関係していますが、おそらく純粋なJavaScriptでスクロール位置を計算することを検討する必要があります。

0
Jason Barry