2015-12-28 16 views
5

この質問には説明が必要なので、私にご負担ください。モバイル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で、あなたはスムーズスクロールを参照してください、まだブラウザ要素の隠ぺいを下にスクロールしていないときになることを開くと 。

答えて

0

<html><body>の両方の要素をスクロールするように設定していると思います。これらのCSSルールは、スクロールできる1つの要素に適用する必要があります。

したがって、htmlまたはbodyのいずれか(両方ではありません)。

+0

ありがとうございますが、違いはありません。ページ全体を円滑にスクロールするには、ボディレベルで設定する必要があります。その後、アドレスバーは常に表示されます。 – Ferdy

関連する問題