iPad の Web サイトにスクロールバーが表示されないのはなぜですか?

CSS オーバーフローによる iOS スクロールバー表示の問題

CSS を使用して iPad Web サイトの div 要素内でスクロールバーを有効にしようとすると、オーバーフローこのプロパティは、デスクトップブラウザでは適切に機能しているにもかかわらず、一見効果がないようです。具体的には、次のプロパティはテストされましたが成功しませんでした:

overflow: auto;
overflow: scroll;

問題の説明

iOS デバイスは、表示されるスクロールバーの実装を回避し、画面スペースを優先することを選択しました。コンテンツ表示。その結果、ユーザーは 2 本指のスクロール機能を利用してオーバーフローするコンテンツをナビゲートすることが期待されます。

ソリューション

WebKit オーバーフロー スクロール:

iOS 5beta 以降では、-webkit-overflow-scrolling: touch プロパティを利用して、目的のスクロールバー動作をトリガーできます。

JavaScript および jQTouch:

あるいは、JavaScript を使用して、場合によっては jQTouch と組み合わせて、オーバーフローした要素のカスタム スクロールバーを作成することもできます。

メディア クエリ:

全体でシームレスなエクスペリエンスを確保するためデバイスでは、@media クエリを使用して iOS デバイスのオーバーフローを除去し、スクロールバーを必要とせずにコンテンツを表示できるようにすることができます。

<link rel="stylesheet" href="handheld.css" media="only screen and (max-device width:480px)">

以上がiPad の Web サイトにスクロールバーが表示されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。