ページのヘッダー領域からスクロールバーを外しましたが、スクロールバーが完全に消えるモバイル(少なくともiPhone、Androidについてはわかりません)を除いて、見栄えがします。どうすれば元に戻すことができますか?
2 に答える
別のアプローチを試すことができます。ページ全体を通常のようにスクロールさせ(no overflow-y
)、ヘッダーを上部に固定しますposition:fixed;
(これがあなたの望みだと思いますか?)
これがあなたのフィドルの編集されたバージョンです:http://jsfiddle.net/TnKNe/
それが機能しない場合は、要素のスクロールを完全に制御できるこのjQueryカスタムコンテンツスクローラーを試すことができます。モバイルもサポートしているとのことですが、今まで使ったことがないので、走行距離が異なる場合があります。
注: position:fixed;
Androidではサポートが不十分またはまったくサポートされていません。iOS4以前はそれをのように扱いますposition:static;
。iOS5と最新のAndroidはどちらもそれをサポートしています:http://caniuse.com/css-fixed
アップデート:
このチュートリアルは、iOS5でのコンテンツのスクロールに関するもので、あなたにぴったりのようです。彼らが中央にスクロール可能な領域を持つ固定ヘッダーを取得するために使用する手法は、明らかにios5以降でのみ機能します。彼らは、より堅牢に見え、Androidでも動作するiScrollと呼ばれるプラグインで同じことを行う別のチュートリアルを持っています。まさにあなたが望んでいたもののようです。これがiScrollのWebサイトです。
モバイルでは、スクロールを開始する(画面上で指をドラッグする)まで、スクロールバーは通常表示されません。それでも、ページのどこにいるかを示す薄いインジケーターであり、実際にタッチして移動することはできません(特定のアプリ/ブラウザーでのみ)。
その理由は、携帯電話が狭いからです。画面幅の5〜10%を占めるスクロールバーでスペースを無駄にしたくありません。