web-dev-qa-db-ja.com

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

Css、jquery、jsを使用してiframeの水平スクロールバーを非表示にする必要があります。

htmliframescrollbarhide
110
nkcmr

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

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

* seamless属性には、標準から削除済み、および ブラウザなし がサポートされています。

.foo {
  width: 200px;
  height: 200px;
  overflow-y: hidden;
}
<iframe src="https://bing.com" 
        class="foo" 
        scrolling="no" >
</iframe>
206
Chase Florell

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

26
Rahul Dadhich

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

body {
    overflow:hidden;
}

ここに非常に簡単な例：

http://jsfiddle.net/u5gLoav9/

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

  • iframeのscrolling="no"属性を必要としないため、HTML5を有効にしてください（HTML5のこの属性は廃止されました）。

  • CSSを使用するほとんどのブラウザで動作します overflow：hidden

  • JSやjQueryは必要ありません。

ノート：

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

overflow-x: hidden;
14
GibboK

この回答は、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/#responsive-embed

2
Razan Paul