HTML iframe のスクロールバーを効果的に無効にするにはどうすればよいですか?

HTML iframe のスクロール バーを無効にする

iframe 要素は、外部コンテンツを Web ページに埋め込む手段を提供します。ただし、これらの iframe 内でスクロールを有効にすると、視覚的に望ましくない乱雑さが生じる可能性があります。この記事では、iframe 要素の利用中にスクロールバーを無効にする問題について説明します。

質問で提供されている HTML コードは、HTML 属性と CSS 属性を使用して iframe の使用例を示しています。

<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no">

使用方法にもかかわらずスクロール = "no" の場合でも、スクロールバーは表示されます。解決策を詳しく調べるには、HTML5 におけるスクロール属性のステータスを理解することが重要です。

残念ながら、スクロール プロパティは HTML5 仕様から省略されています。ただし、現在のブラウザのほとんどは引き続きサポートします。 Firefox は誤ってオーバーフロー プロパティをサポートしている唯一の最新ブラウザであるため、オーバーフロー プロパティだけでは HTML5 で実行可能な解決策ではありません。

実際的な回避策には、両方のアプローチを組み合わせる必要があります。

<iframe src="" scrolling="no"></iframe>

iframe {
  overflow: hidden;
}

ブラウザが進化するにつれて、このソリューションは時代遅れになる可能性があります。 JavaScript を使用したより包括的なソリューションについては、受け入れられた回答に記載されているリンクを参照してください。

編集: テストによると、scrolling="no" を設定すると、IE10、Chrome 25 でスクロールバーが効果的に無効になります。 、Opera 12.12.

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