web-dev-qa-db-ja.com

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

このコードを使う

<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 ）

水平スクロールバーを削除して垂直スクロールバーのCSSを変更する方法を教えてください。

ありがとうございました。

htmlcssiframe
93
Faith In Unseen Things

あなたのCSSで：

iframe{
    overflow:hidden;
}
14
takien

Iframeにscrolling="no"属性を追加してください。

245
THRIVE

これはすべてのブラウザで機能します。ここjsfiddle http://jsfiddle.net/zvhysct7/1/

<iframe src="http://buythecity.com"  scrolling="no" style=" width: 550px; height: 500px;  overflow: hidden;" ></iframe>
26
Thyagarajan C

Iframeにscroll="no"とstyle="overflow:hidden"を追加してもうまくいきませんでした。iframeにロードされたhtmlドキュメントの本文にstyle="overflow:hidden"を追加する必要がありました。

16
nirvana74v

Iframeタグにscrolling="no"とseamless="seamless"属性を追加するだけです。このような：-

 1. XHTML => scrolling="no"
 2. HTML5 => seamless="seamless"
10
Nima Rahbar
<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を使用すると、どのブラウザでもスクロールバーが表示されなくなります。

9
KnightFury

両方のスクロールバーを非表示にするには、これをあなたのCSSに追加してください

iframe 
{
  overflow-x:hidden;
  overflow-Y:hidden;
}
8
Deepika Patel

ここの誰かがiframeのスクロールバーを無効にするのに問題があるのなら、iframeのコンテンツが要素のスクロールバーを持っているからでしょう下html要素！

一部のレイアウトでは、htmlおよびbodyを100％の高さに設定し、#wrapper（またはscroll）とともにoverflow: auto; divを使用して、スクロールを#wrapperエレメントに移動します。

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

5
WraithKenny

水平スクロールバーだけを隠すには、CSSにこれを追加してください。

iframe{
    overflow-x:hidden;
}
4
Abhidev

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

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

編集：比較的サポートされている 、::-webkit-scrollbarはすべてのブラウザに適しているとは限りません。注意して使用してください:)

3
DotBot

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

<iframe frameborder="0" scrolling="no" style="height:380px;width:6000px;border:none;" src='https://yoururl'></iframe>
0
Allabux B