48

最近、モバイルWebアプリに取り組んでいます。私は現在、特に iPhone 向けの iOS に焦点を当てて、モバイル ファーストで最適化しています。ネイティブアプリのきっちりとした見た目は好みませんが、ネイティブ感は絶対に大事だと思います。このアイデアを反映するためにマークアップと CSS を作成し、これを残しました (後で発生する問題をよりよく理解するために注釈が付けられています)。

ウェブアプリのマークアップ

これはすべて問題なく動作し、静的なヘッダーとフッター、およびスクロール可能な内部ビュー (おかげで) を備えたネイティブな感覚を持つという利点もあります-webkit-overflow-scrolling: touch。

iOS を 5 分以上使用したことがある人ならわかると思いますが、上下にスクロールすると、かなりの勢いでスクロールします。また、リストの一番上にヒットすると、素晴らしい「バウンス」効果が得られます。

Settings.app でのリストのバウンス

これは iOS のフィーリングを定義するのに役立つと感じており、そのような小さなディテールが大いに役立ちます。幸いなことに、Web アプリケーションのスクロール可能な要素でリストの一番下にいて、一番上を超えてスクロールすると、同じ効果が得られます。これは、実際の望ましい動作です。

Web アプリケーションで上下にスクロールすると、このバウンス効果が発生します

ただし、リストの一番上にいて、リストの一番上で同じバウンス動作を再現しようとすると (上記の Setting.app のように)、次のような望ましくない動作が発生します。 下にスクロールすると、アプリのクロム全体にバウンス効果が生じます

Stack Overflow で同様の 質問を見たことがありますが、これらはすべてバウンスを無効にすることを選択しています。バウンスし続けることがbody section section#mainまったく可能かどうか疑問に思っていますが、常にwebapp の chrome ではなくで発生させます。私は jQuery を使用していないので、答えはストレートな JavaScript であることが望ましいです (ただし、CSS ソリューションのボーナス ポイント)。

すべてのコード (Sinatra、HAML、Sass、現在のブランチは) を含むGitHub リポジトリso、または破損した画像とリンクを含む JSFiddleを次に示しますが、iPhone で問題の問題を示しています (ホーム画面に追加してテストするのが最適です)。

4

4 に答える 4

22

古い情報:私はこれを解決しました: http://www.hakoniemi.net/labs/scrollingOffset/nonbounce.html

新しい情報:これは、ここから見つけることができる jQuery プラグインになりました: http://www.hakoniemi.net/labs/nonbounce/ .

これを適用するとズーム機能が失われたり、動的更新がスムーズに機能しないなど、いくつかの問題があります。

<div class="nonbounce">...</div>しかし、最も簡単な方法は次のように定義することです:$.nonbounce();

于 2013-01-08T10:46:51.477 に答える
5

私は同じ問題に遭遇し、この解決策を思いつきました：

http://demo.josefkjaergaard.com/stackoverflow/element_scroll/index.html

基本的に、スクロールコンテンツが最大位置にならないようにします。これにより、ボディスクロールがアクティブ化されなくなります。

機能しますが、イージングの最後に少しスナップが作成されます。もう少し作業を進めれば、コンテンツを反対方向にオフセットすることで、この動作を隠すことができます。

于 2013-04-18T17:35:21.213 に答える
0

この疑似コードはどうですか:

document.body.addEventListener("ontouchstart", function(event) {
  if(document.getElementById("main").scrollTop > 0) return;
  event.preventDefault();
  event.stopPropagation();
}, false);
于 2013-01-10T08:10:02.257 に答える