Mobile Safari でスクロールを無効にするにはどうすればよいですか?

Mobile Safari でのスクロールの無効化

表示領域を超えてオーバーフローする長いページに直面した場合、Mobile Safari でのスクロールを無効にする必要があります。シームレスなユーザーエクスペリエンスを提供します。この記事では、iOS デバイス上でページの「折り目」の下にコンテンツが拡張されないようにする解決策を検討することで、この課題に対処します。

Body Overflow:hidden Inefficientness

「overflow:」を適用する:通常、body 要素に「hidden」を追加すると、ほとんどのブラウザでスクロールが制限されます。ただし、このアプローチはモバイル Safari では機能しません。この制限により、これらのデバイスでビューポートを超えるコンテンツを非表示にするという問題が生じます。

HTML と本文のオーバーフロー: 非表示の解決策

この問題を解決するには、次のことをお勧めします。 「オーバーフロー:非表示;」を適用します。 HTML 要素と body 要素の両方に。このアプローチにより、モバイル Safari でのスクロールが効果的に無効になり、コンテンツがブラウザの表示領域内に確実に制限されます。

iOS 9 固有の修正

iOS 9 ユーザーの場合、望ましい結果を達成するには、わずかな変更が必要です。 「overflow:hidden;」に加えて「position:relative;」を追加します。そして「高さ:100%;」 HTML と本文の両方の CSS ルールに準拠します。これらの調整により、iOS 9 デバイスでスクロールが適切に無効化されます。

以上がMobile Safari でスクロールを無効にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。