5

ユーザーが指で上下にスクロールできるコンポーネントを含むWebベースのアプリケーションがあります。イベントのpreventDefaultメソッドを使用して、iOSデバイスでタッチ移動によって画面全体が移動するデフォルトの動作を防止します。

残念ながら、これは私が今朝アップグレードしたばかりのiOS5ではもう機能しないようです。これはiOS5では別の方法で行われると想定する必要がありますが、手順を提供するリソースをまだ見つけることができていません。

更新＃1：特定の質問に対する答えを見つけることができませんでしたが、-webkit-overflow-scrollingスタイルを使用するようにコードを少し調整し（「タッチ」の値に設定）、洗練された慣性スクロール機能を実装することができました（スワイプの速度に応じてコンテンツがより速くスクロールし、境界に達すると「ラバーバンドが跳ね返る」場所です。見た目はかなりかっこいいです...

更新＃2：私は今別の奇妙な問題を抱えています。オーバーフロースクロールの動作が混同されることがあるという奇妙な理由により、コンテンツを上下に移動するには、含まれている要素を指で左右にドラッグする必要があります。私はまだこれが起こる理由を理解することができません-誰かが何かアイデアを持っていますか？

4

2 に答える 2

8

私は非常に簡単な解決策を見つけました。スクロールが許可されている要素にイベントがヒットしたら、イベントにフラグを立てるだけです。ドキュメントのイベント リスナーでは、フラグが設定されているかどうかを確認し、フラグが設定されていない場合にのみイベントを停止します。

this.$scrollableEl.on('touchmove', function(event){
  event.comesFromScrollable = true;
  // when you have containers that are srollable but 
  // doesn't have enough content to scroll sometimes:
  // event.comesFromScrollable = el.offsetHeight < el.scrollHeight;
});

$(document).on('touchmove', function(event){
    if (!event.comesFromScrollable){
      event.preventDefault();
    }
});

代わりにevent.stopImmediatePropagationを使用することもできるため、ドキュメント要素に eventListener は必要ありませんがtap、私の場合は zepto.js が壊れます。

this.$scrollableEl.on('touchmove', function(event){
  event.stopImmediatePropagation();
});
于 2012-06-15T09:32:11.173 に答える
6

まず、次のコードを使用して、e.preventDefault() が iOS 5 ですべてのスクロールを無効にしていることを確認できます。

document.ontouchmove = function(e){ e.preventDefault(); }

残念ながら、これにより、overflow:scroll div のスクロールが無効になります。(誰かが内部要素のスクロールを有効にしたままにする解決策を持っている場合は、共有してください。)

update#2 に関しては、別のスクロール可能な要素 (ページ自体を含む) にネストされたスクロール可能な要素がある場合の奇妙な動作に気付きました。デバイスは、ユーザーがスクロールしようとしている要素をためらうことがあります。特に、position:fixed を使用してこの問題に気付きました。私の解決策は、ボディの高さが 100% であることと、可能な場合はスクロール可能な要素が position:absolute を使用することを確認することでした。

于 2011-10-14T06:55:46.670 に答える