この質問には説明が必要なので、私にご負担ください。モバイルSafari:慣性スクロールと最低限のUI動作?
一般的な考え方とは対照的に、慣性スクロール(非常にスムーズな60fpsスクロール)は、デフォルトでモバイルSafariのWebページでは有効になっていません。それがユーザーエクスペリエンスの違いの世界を作るように、私は特にiOS用Modernizr試験後、動的ページのHTMLとBODY要素に、このCSSを適用することによって、それを有効にしている:
<style>
.touchscroll {
overflow: auto;
-webkit-overflow-scrolling: touch;
position:relative;
height:100%;
}
.touchscroll body {
height:100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
position:relative;
}
</style>
上記を基本的になりますbody要素にスクロール可能な要素を指定し、-webkit-overflow-scrolling:touchを使用すると、ページ全体でスムーズなintertiaスクロール効果が得られます。この解決策の背景については、here(免責事項:記事)を参照してください。
これまでのところうまくいきます。問題は、このソリューションがMobile Safariの他の非常に望ましい動作を効果的に無効にすることです。通常、スクロールするとアドレスバーが小さくなり、ブラウザの下部バーが完全に隠されます。バックアップをスクロールするときに再表示されます。
残念ながら、上記の手法は何らかの理由でこれを無効にします。はい、スムーズなスクロールが可能ですが、ブラウザバーは常に大きく、ボトムバーは永続的に表示され、両方とも貴重なスペースを占めます。
私の質問は、私は両方を持つことができますか?私はページ全体でスムーズなスクロールを望みますが、スクロールするときのブラウザ要素のデフォルトの非表示動作も必要です。
私はこれを使用していますサイトの例はここにある:http://www.jungledragon.com/
あなたがモバイルSafariで、あなたはスムーズスクロールを参照してください、まだブラウザ要素の隠ぺいを下にスクロールしていないときになることを開くと 。
ありがとうございますが、違いはありません。ページ全体を円滑にスクロールするには、ボディレベルで設定する必要があります。その後、アドレスバーは常に表示されます。 – Ferdy