0

問題:

iOSのホーム画面にWebアプリケーションがあるので、ブラウザーウィンドウはなく、見た目も機能も非常に優れています。内部のdiv要素にタッチスクロールイベントを実行させ、iOSで勢い/バウンススタイルを使用する方法を理解しました。これは完全に機能します...今私が遭遇する問題は、バウンススクロールです(これもiOSのみです) )ページにある固定要素やサイト関連のアニメーションを台無しにしています。

私が次のことを試してみると:

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

問題は解決しましたが、アプリケーションのどこにもスクロールできなくなりました。

必要なもの:

体を完全に固定したい...誰かが私のサイドバーやナビゲーションバーなどをつかんでページを引っ張ると、体が跳ね返ります。しかし、誰かがコンテンツ領域内にいる場合、問題はまったくありません。アプリケーションは完璧にスクロールし、見栄えがします。サイドバー、ナビゲーションバー、または本体のスクロールを停止すると、アプリケーションのすべてのスクロールが機能せず、基本的に機能しなくなります。

tl; dr:本体がスクロールで跳ね返ります。スクロールするコンテンツ領域が必要で、他の場所にはスクロールしません。ボディは決して動かないはずですが、ボディ内でスクロール可能と私が考える要素は動くべきです。

補足として、私は(他の多くの中で)投稿された次の人気のある質問/解決策を閲覧しました:

1 2 3

人々が私が検索をしなかったと思う前にそれを投稿したかっただけです...私はこれに何時間もいて、上記の投稿よりもさらに多くの解決策を見てきましたが、上記の最も人気のあるものを入手したかったしたがって、これが重複した質問だとは誰も考えませんでした。

4

1 に答える 1

1

私は数日前にこれを理解し、この便利なjsbinをセットアップして、この作業を行うために何をしたかを示しました。

私の作業jsbinの例

iPadでこのリンクを開くと、テキストはスクロール可能である必要があります。現在機能しているtouchmoveイベントがない場合は、画面の残りの部分を引っ張ってみてください。

それをいじってみると、内側のテキストフィールドだけが期待どおりに移動することに気付くでしょう。.scrollableこれは、私のクラスをクラス内に配置することによって決定され.containerます。クラスは、その.scrollable親コン​​テナの高さ全体を占めます。

次に、コンテナをのように高い高さにしheight: 500pxます。ここでの目標は、オーバーフローが発生しないように十分に大きくし、iPad上に他の空白を残すのに十分な大きさにすることです。スクロールまたはプルしてみてください...touchmoveイベントは発生せず、画面は所定の位置に留まります。

私のJSは、オブジェクトがタッチされた後にオーバーフローしたかどうかを判断します。含まれている場合は、スクロールします。そうでない場合は、スクロールイベントを送信しません。

それで遊んで、もっと良い例を提供できるかどうか、そしてバグに遭遇した場合は私に知らせてください...今私が知っている唯一のことは、あなたが本当にそれを壊してサイトをいじり始めているかどうかです現在のtouchmoveイベントが発生しているか、ページが最初に読み込まれています...これらは「バグ」とは見なされませんが、それらの修正を見つけることができれば、私はすべての耳です!

于 2012-12-19T17:39:42.830 に答える