iframeからスクロールバーを削除する

117

このコードを使用する

<iframe frameborder="0" style="height: 185px; overflow:scroll; width: 100%" src="http://www.cbox.ws/box/?boxid=439&boxtag=7868&sec=main" marginheight="1" marginwidth="1" name="cboxmain" id="cboxmain" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe>

このように表示されます（http://www.talkjesus.comのホームページのshoutbox ）

水平スクロールバーを削除して垂直スクロールバーのCSSを変更するにはどうすればよいですか？

html  css  iframe 
— 目に見えないものへの信仰
ソース
2
stackoverflow.com/questions/4856746/…と重複しています。これはより良い回答です
— ダニエルタルプ

回答:

9

あなたのCSSで：

iframe{
    overflow:hidden;
}
— たきえん
ソース
7
よろしくお願いしますが、水平スクロールのみで、Firefoxには引き続き表示されます。ChromeやIEには表示されません。また、スクロールバーのCSSはIEでのみ効果的に適用され、FFやChromeでは適用されません（後でデフォルトで表示されるベージュ色/シェードが表示されます）。
— 目に見えないものへの信仰2012年
3
オーバードメインがiframeドキュメントで発生するため、これは機能しません。クロスドメインのiframeのセキュリティ制限のため、通常は変更できません。
— thdoan 2015
54
これはiframeのコンテンツには影響せず、iframe自体に影響を与えるため、機能しません。解決策はscrolling = "no"です。
— TheLD
4
これは不正解です。GoogleChromeのスクロールバーは削除されませんが、scrolling = "no"は削除されます。
— AndersLindén2017年
@LarsVandeDonkあなたの答えは正しい解決策でなければなりません。
— Wong Jia Hau
313

scrolling="no"iframe に属性を追加します。

— 繁栄する
ソース
1
CSSでこれを行うことができますか？
— Evorlor 2015
1
はい。ただし、ChromeではscrollIntoViewを使用できません。code.google.com/p/chromium/issues/detail?id=137214を
— Peter Brand
1
これにより、コンテンツのスクロールバーが非表示になり、コンテンツをスクロールできなくなります。iframeのスクロールバーが表示されるのを防ぐことはできません。
— Dave Cousineau 2015年
3
iframeのスクロール属性は正式に廃止されました。代わりにCSSを使用する必要があります。
— Mike Poole
4
@MikePoole正式に廃止された可能性がありますがoverflow:hidden;、Chrome 65.0.3325.181の設定には役立ちませんでしたが、scrolling="no"役立ちました。
— いくつかの
21

追加scroll="no"およびstyle="overflow:hidden"IFRAMEが機能しなかった上、私は追加する必要がありましたstyle="overflow:hidden"のiframe内に読み込まれたHTMLドキュメントのボディに。

— ニルヴァーナ74V
ソース
1
これが役立つ場合は、Firefoxに問題があります。CSS transform: scale(0.7)などの要素がある場合overflow: hidden;、先祖でクリップしない限り（iFrameに表示される）スクロールバーが作成されます（代わりにdivの可能性があります）。体）。
— WraithKenny 2017年
8
これは、「scroll = no」ではなく「scrolling = no」だからです。
— ブライアングリーン
あなたは私たちの周りにロードされたという意味ですか？何が周りにありますか？
— ジョアン・ピメンテル・フェレイラ
<iframe src = "/ test.html">内に読み込まれます。test.htmlにはこの設定があります。
— nirvana74v
16

scrolling="no"以下のような属性を追加してみてください：

<iframe frameborder="0" scrolling="no" style="height:380px;width:6000px;border:none;" src='https://yoururl'></iframe>
スニペットを展開

— アラバックB
ソース
11

ただ、追加scrolling="no"やseamless="seamless"iframeタグに属性。このような：-

 1. XHTML => scrolling="no"
 2. HTML5 => seamless="seamless"
— ニマラーバー
ソース
13
seamless属性はHTMLから削除されました。
— neopickaze
シームレス属性の代わりにcssを使用する必要があります。
— Nima Rahbar
@NimaRahbar seamless属性は廃止されている可能性がありますが、cssはiframeパラメータをサポートしていません。
— 放棄されたカート
9

ここでは誰もが上のスクロールバーを無効にすると問題が発生している場合iframeはiframeのコンテンツは、要素のスクロールバーがあるので、それは可能性があり、以下のhtml要素にます！

一部のレイアウトではhtml、body高さが100％に設定されており、#wrapperdiv overflow: auto;（またはscroll）を使用して、スクロールを#wrapper要素。

このような場合、他のページのコンテンツを編集する以外に、スクロールバーの表示を妨げる​​ものはありません。

— レイスケニー
ソース
8 
<div id="myInfoDiv" seamless="seamless" scrolling="no" style="width:100%; height: 100%; float: left; color: #FFF; background:#ed8719; line-height:100%; font-size:100%; font-family: sans-serif>;

上記のdivを使用すると、どのブラウザーでもスクロールバーが表示されません。

— ナイトフューリー
ソース
3
seamless属性は有効なHTML5ではないため、ほとんどのブラウザー（caniuse.com/#search=seamless）でサポートされておらず、他のほとんどのスタイル設定は不要です。
— Pere
6

これは最後の手段ですが、言及する価値があります。親の::-webkit-scrollbar疑似要素を使用して、iframe有名な90年代のスクロールバーを取り除くことができます。

::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

編集：それはだものの、比較的サポートする、::-webkit-scrollbarすべてのブラウザに合わないことがあります。注意して使用してください:)

— DotBot
ソース
2
これが私を助けた唯一の答えです。スクロールはできますが、醜いスクロールバーは表示されません。ありがとうございました！
— Karmidzhanov
4

これをCSSに追加して、水平スクロールバーのみを非表示にします

iframe{
    overflow-x:hidden;
}
— アビデフ
ソース
3 
iframe {
  display: block;
  border: none;         /* Reset default border */
  height: 100vh;        /* Viewport-relative units */
  width: calc(100% + 17px);
}
div {
  overflow-x: hidden;
}

このようにして、iframeの幅を必要以上に大きくします。次に、overflow-x：hiddenで水平スクロールバーを非表示にします。

— ニコグリル
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.