ホームページ >ウェブフロントエンド >CSSチュートリアル >Mobile Safari でスクロールを無効にするにはどうすればよいですか?

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

Linda Hamilton
Linda Hamiltonオリジナル
2024-12-27 03:07:13819ブラウズ

How Can I Disable Scrolling in Mobile Safari?

Mobile Safari でのスクロールの無効化: 総合ガイド

Mobile Safari は直感的なブラウジング エクスペリエンスを提供しますが、無効にしようとすると問題が発生する可能性があります。長いページをスクロールします。この問題は、コンテンツがユーザーの表示画面を超えている場合に発生し、望ましくないスクロール動作を引き起こす可能性があります。

これに対処するには、CSS の 'overflow:hidden' プロパティを body 要素に直感的に適用できます。ただし、このアプローチはモバイル Safari 環境では失敗することが多く、開発者は困惑しています。

この制限を克服するための解決策は、「overflow:hidden」プロパティを body 要素を超えて拡張して HTML 要素も含めることにあります。 「html」と「body」の両方に「overflow:hidden」を設定すると、ブラウザ ウィンドウのスクロールが効果的に防止され、コンテンツが表示されるビューポートに制限されます。

html,
body {
    overflow: hidden;
} 

特に iOS 9 の場合、追加の調整が必要な場合があります:

html,
body {
    overflow: hidden;
    position: relative;
    height: 100%;
}

これらの CSS 変更を適用すると、モバイル Safari でのスクロールを効果的に無効にし、コンテンツをきれいに保つことができます。ユーザーの目に見える画面内に含まれます。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。