web-dev-qa-db-ja.com

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

私のサイトには次のiframeがあります。

<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-Origin allow-scripts allow-forms" scrolling="no" style="overflow: hidden"></iframe>

そして、スクロールバーがあります。
それらを取り除く方法は？

htmlcssiframe
63
Michał Herman

残念ながら、HTMLとCSSプロパティだけで完全に準拠したHTML5でそれが可能であるとは思わない。しかし幸いなことに、ほとんどのブラウザーはscrollingプロパティ（ HTML5仕様 から削除されました）を引き続きサポートしています。

overflowはHTML5の解決策ではありません。これは、間違ってこれをサポートする最新のブラウザーがFirefoxであるためです。

現在の解決策は、次の2つを組み合わせることです。

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

iframe {
  overflow: hidden;
}

ただし、ブラウザが更新されると、これは陳腐化する可能性があります。 JavaScriptソリューションについてこれを確認することもできます。 http://www.christersvensson.com/html-tool/iframe.htm

編集：確認したところ、scrolling="no"はIE10、Chrome 25、Opera 12.12で動作します。

140
James Donnelly

私はこのCSSで同じ問題を解決しました：

    pointer-events:none;
13
John Smith

を使用して動作するようです

html, body { overflow: hidden; }

内部 IFrame

編集：もちろん、これはIframeのコンテンツにアクセスできる場合にのみ機能します（私の場合はこれがあります）

8
Alex

すべてのコンテンツを次のように設定します。

#yourContent{
 width:100%;
height:100%;  // in you csss
}

問題は、iframeスクロールはiframe自体ではなくコンテンツによって設定されるということです。

cSSを使用して内部のコンテンツを100％に設定し、HTMLのiframeに設定する

2
Verde Mc

現在のブラウザ（Google Chromeバージョン60.0.3112.113（公式ビルド）（64ビット））でscrolling = "no"を試しましたが、うまくいきませんでした。ただし、scroll = "no"は機能しました。試す価値があるかもしれません

<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-Origin allow-scripts allow-forms" scroll="no" style="overflow: hidden"></iframe>
1
Zach Imholte

Iframeタグにこのスタイルを追加します。

overflow-x:hidden;
overflow-y:hidden;
0
sasi

以下のhtml5バージョン

iframe {
    overflow:hidden;
}

Html5で

<iframe seamless="seamless"  ....>


iframe[seamless]{

   overflow: hidden;
}

ただし、まだ正しくサポートされていません

0
Prashobh

"overflow：hidden;"プロパティはiFrame自体では正しく機能しませんが、ページの本文に適用すると結果が得られるようですinsideiFrame、私はこれを試しました：

iframe body { overflow:hidden; }

驚くべきことにdidはFirefoxで機能し、これらの迷惑なスクロールバーを削除します。

ただし、Safariでは、iframeの右側、コンテンツと境界線の間に、奇妙な2ピクセル幅の透明な線が表示されます。奇妙な。

0
Seb Zaremba