私は iPhone Web アプリケーションを作成していますが、iOS5 以降では、ヘッダーなどに position: fixed; を使用できるようになりました。
機能しているものの、ページの上部を上にスクロールすると、通常の灰色の領域がしばらく表示され、その後スクロールできなくなります。
このスクロールを停止する方法はありますか? overflow: hidden; などを試してみましたが、何も見つからないようです。
PS スクロールを停止したいのは 1 つだけです。#container という名前の div があり、これをスクロールできるようにしたいのです。
ベストアンサー1
いくつかのソリューションを検討した後、カスタム ソリューションを作成し始めました。
バウンスフィックス
http://jaridmargolin.github.io/bouncefix.js/
使用法：
バウンスフィックス.add(el)
修正を適用して、指定された要素が極端にスクロールしたときに、ボディ全体の弾性バウンスが発生しないようにします。
バウンスフィックス.削除(el)
全身の弾性バウンスを修正する責任を負うすべてのリスナー/オブザーバーを削除します。
なぜ？
スクロールフィックス良いスタートでしたが、いくつかの問題に気づきました。
- これは、スクロール可能なコンテンツがある場合にのみ機能しました。空のページがある場合は、本文にバウンス効果が発生します。
- API はリスナーを削除するメソッドを公開していませんでした。私のアプリには複数のページがあり、ユーザーがアプリ内を移動するときにすべてのリスナーをアタッチしたままにしておくのは適切ではないと感じました。
どうやって？
これは scrollfix と同様のアプローチを使用します。問題は、スクロールの極限の 1 つにいるときに発生します。touchstart では、上端か下端かを確認し、上にある場合は 1 ピクセルを追加し、下にある場合は 1 ピクセルを削除します。
残念ながら、このトリックは scrollTop 値を設定できる場合にのみ機能します。コンテンツがまだスクロール可能でない場合、たとえばリスト項目が 1 つしかない場合は、本文全体が再びスクロールします。Bouncefix.js は、イベント委譲を使用し、touchstart がトリガーされるたびに scrollHeight を offsetHeight と比較することで、このすべてをバックグラウンドで処理します。スクロール可能なコンテンツがない場合、コンテナー上のすべてのスクロールは e.preventDefault(); によってブロックされます。