1

誰でも次の問題を手伝ってもらえますか?

ヘッダーとスクロール可能なリストで構成される単純なフルスクリーン Web アプリケーション (iOS およびモバイル サファリを対象) があります。

私は適用しました：

overflow: scroll;
-webkit-overflow-scrolling: touch;

スクロール可能な要素に、次の JavaScript を適用しました。

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

var theWrapper = document.getElementById("wrapper");
theWrapper.ontouchmove = function(e){
  console.log(e);
  e.stopPropagation();
  e.stopImmediatePropagation();
    // e.preventDefault();
};

スクロール バウンスが発生しないようにします。

これは、ヘッダーからスクロールしようとすると、無料の Web アプリのバウンスは発生しませんが、リストを端までスクロールすると (つまり、リストの上部にある場合は scrollUp し、下部にある場合は scrollDown します)、部分的に成功しています。リストの）スクロールがバブルアップし、アプリ全体がスクロールバウンスを行うようです。

JS Bin でデモを作成したので、自分で動作を体験できます (iPhone/iPad のみで申し訳ありませんが、デスクトップ ブラウザーでは通常どおり動作します*)。

http://jsbin.com/opetom/4/

最良の結果を得るには、iPhone のホーム画面にデモを追加してください。

あなたが提供できる助けを前もって感謝します。本当にイライラしますし、これはよくある問題だと思います。

*実は、Mountain Lion と最新の Safari にアップデートしたばかりで、動作はモバイル Safari と同じになりました。「タッチパッドスクロールで2本指」を使用する場合も同じです。リストが端にあるときにスクロールしようとすると、「バウンス」します。

4

1 に答える 1

0

十分な Webkit を備えたタッチ デバイスを手元に持っていませんが、「e.cancelBubble = true;」を追加してみましたか?

または、キャプチャ フェーズとバブル フェーズのイベント リスナーの使用と stopPropagation の使用を組み合わせて遊ぶこともできます。

于 2012-08-02T16:16:15.657 に答える