web-dev-qa-db-ja.com

body要素のスクロールバウンスを防ぎますが、iOSの子要素についてはそのままにします

私は最近モバイルWebアプリに取り組んでいます。私はモバイルファーストを最適化しており、今は特にiPhone用のiOSに焦点を当てています。ネイティブアプリの正確な外観は必要ありませんが、ネイティブであることのfeelingは絶対的に重要だと思います。このアイデアを反映するためにマークアップとCSSを作成しましたが、これは残しておきます(後の問題をよりよく理解するために注釈を付けました)。

Webapp markup

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

IOSを5分以上使用している人なら誰でも知っているように、上下にスクロールすると、素敵な勢いのスクロールが得られます。また、リストの先頭に到達すると、ニースの「バウンス」効果が得られます。

List bouncing in Settings.app

これはiOSのフィーリングを定義するのに役立ち、そのような小さな詳細は大いに役立つと思います。幸いなことに、webappのスクロール可能な要素のリストの最上部の下にいて、最上部を過ぎてスクロールすると、同じ効果が得られます。これは、望ましい動作です

Scrolling down and up in a webapp produces this bouncing effect

ただし、リストの一番上にいて、リストの一番上で同じバウンド動作を再現しようとすると(上記のSetting.appのように)、次の動作が得られます望ましくない: Scrolling down produces the bouncing effect for the entire chrome of the app

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

GitHub repo すべてのコード(Sinatra、HAML、およびSass。現在のブランチはso)です。または JSFiddle は壊れた画像とリンクです、ただし、iPhoneで問題の問題を示しています(テストするにはホーム画面に追加するのが最適です)。

47
Kyle Lacy

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

新しい情報:これはここからjQueryプラグインになります: http://www.hakoniemi.net/labs/ nonbounce /

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

しかし、今最も簡単な方法は、定義することです:_<div class="nonbounce">...</div>_そして$.nonbounce();

22
zvona

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

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

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

動作しますが、イージングの最後に少しスナップを作成します。もう少し作業を行うと、コンテンツを反対方向にオフセットすることにより、この動作をおそらく隠すことができます。

5
0
philfreo

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

document.body.addEventListener("ontouchstart", function(event) {
  if(document.getElementById("main").scrollTop > 0) return;
  event.preventDefault();
  event.stopPropagation();
}, false);
0
Kernel James