iframeの水平スクロールバーを非表示にしますか？

110

CSS、jquery、jsを使用して、iframeの水平scollbarを非表示にする必要があります。

— nkcmr
ソース

1

可能性の重複：サファリ/クローム（Webkitの） - iframeの垂直スクロールバー隠すことはできませんし、他の人

— マット・ボール

iframeが親ページと同じドメインにありません。

— nkcmr 2011年

オーバーフロー-y：非表示。Google Chrome、Safari、Operaでは機能しません。jsfiddle.net/m5Btd/3でお

— phangia2712

208

の組み合わせでこれを行うことをお勧めします

CSS overflow-y: hidden;
scrolling="no" （HTML4の場合）
~~およびseamless="seamless"（HTML5の場合）~~*

^{* seamless属性は標準から削除され、ブラウザはそれをサポートしていません。}

.foo {
  width: 200px;
  height: 200px;
  overflow-y: hidden;
}

<iframe src="https://bing.com" 
        class="foo" 
        scrolling="no" >
</iframe>

スニペットを展開

— チェイスフロレル
ソース

9

Chrome 15にサンプルをロードしましたが、それでもスクロールバーが表示されます。

— Dan

61

scrolling="no"属性をiframeに追加すると、Chromeのスクロールバーが削除されるようです。

— Nick

2

@Nick少なくとも私のコンピューターでは、Chromeで削除されません。img339.imageshack.us/img339/6685/chromelj.png

— l46kok

1

@ l46kokスクリーンショットに含まれていないものscrolling="no"

— チェイスフローレル

3

シームレス属性は現在、主要なブラウザではサポートされていないことに注意してください。caniuse.com/#feat=iframe-seamless

— Liyali

26

scrolling="no"iframeに属性を設定します。

— ラフル・ダディッチ
ソース

15

内部のドキュメントのコードを変更することが許可されてiframeおり、そのコンテンツが親ウィンドウを使用してのみ表示される場合は、次のCSSをに追加するだけですiframe。

body {
    overflow:hidden;
}

ここに非常に簡単な例があります：

http://jsfiddle.net/u5gLoav9/

このソリューションにより、次のことが可能になります。

のscrolling="no"属性は必要ないため、HTML5を有効にしてくださいiframe（HTML5のこの属性は廃止されました）。
CSS オーバーフローを使用して、大部分のブラウザーで動作します。
JSやjQueryは必要ありません。

ノート：

水平方向のスクロールバーを禁止するには、代わりに次のCSSを使用します。

overflow-x: hidden;

— GibboK
ソース

2

この回答は、Bootstrapを使用するWebサイトにのみ適用されます。Bootstrapのレスポンシブな埋め込み機能は、スクロールバーを処理します。

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/WsFWhL4Y84Y"></iframe>
</div>

jsfiddle：http ://jsfiddle.net/00qggsjj/2/

http://getbootstrap.com/components/#sensitive-embed

— ラザンポール
ソース