2008-09-15 16 views
19

私はiframeを持っています。コンテンツは設定している幅よりも広いため、iframeは水平スクロールバーを取得します。私はちょうどスクロールバーを削除したいので、私はiframeの幅を増やすことはできません。私は "いいえ"にスクロールプロパティを設定しようとしたが、両方のスクロールバーを殺すと、私は垂直の1つをしたい。私はoverflow-xを "hidden"に設定しようとしましたが、それはffで水平スクロールバーを強制終了させましたが、IEでは無効にしました。私のために悲しい。恐ろしいiframe水平スクロールバーはIEでは削除できませんか?

答えて

43
scrolling="yes" horizontalscrolling="no" verticalscrolling="yes" 

これをiFrameタグに挿入します。

CSSでこれをフォーマットしようとすると、混乱する必要はありません。

+1

zOMG。 MSDNでhorizo​​ntalalscrolling属性とverticalscrolling属性が完全に文書化されていないように見えますが、これはIE 6の問題を解決するために役立ちました。 –

+1

素晴らしいソリューション、まさに私が探していたもの、tyvm。 – David

+0

iframeにカスタムHTML5広告を表示しているIE10に問題があるこのトリックをすることは私たちにとってはうまくいかなかった... – lkartono

5

iframeをdivに入れてから、divをスクロールしてみてください。問題なくIEのdivのスクロールを制御できます。IEはiframeのスクロールに問題があります。このトリックをすべき簡単な例があります。

<html> 
    <head> 
     <title>iframe test</title> 

     <style>   
     #aTest { 
      width: 120px; 
      height: 50px; 
      padding: 0; 
      border: inset 1px #000; 
      overflow: auto; 
     } 

     #aTest iframe { 
      width: 100px; 
      height: 1000px; 
      border: none; 
     } 
     </style> 
    </head> 
    <body> 
     <div id="aTest"> 
      <iframe src="whatever.html" scrolling="no" frameborder="0"></iframe> 
     </div> 
    </body> 
</html> 
+0

ありがとうございます。唯一の問題は、iframeコンテンツの固定高さを定義しなければならないことです。私はこれを使用するつもりで、ちょっとハッキリなiframeの余分な高さを指定する必要があります。しかし、多くのおかげで、私はそこにいました。 – mrjrdnthms

24

スクロールバーがのプロパティではありません、それが含まれているページの財産です。内側のページの<html>要素にoverflow-x: hiddenを入れてみてください。

+1

はbody要素で処理されました。ありがとう! –

+2

このソリューションは、iframeコードのライトを保持し、カプセル化を優先するほど優れています。私は構文を追加し覚えておく必要はありません。 –

+3

私は@DannyGに同意します。マークアップのプレゼンテーション属性の時代を過ぎました。純粋なCSSソリューションは、いくつかの理由から好ましい。 – DuxPrime

0
<iframe style="overflow:hidden;" src="about:blank"/> 

はIEで動作するはずです。 IE6にはoverflow-xとoverflow-yをサポートする問題がありました。

もう1つ注意すべき点は、iframeのIEの境界線は、camelCaseで「frameborder」属性を設定した場合にのみ削除できることです。

<iframe frameBorder="0" style="overflow:hidden;" src="about:blank"/> 

CSSで正しくスタイルできればうれしいですが、IEでは動作しません。

+0

私の場合、xスクロールバーを削除したいのですが、yではなく、オーバーフロー隠しを設定すると両方が削除されます。それは正しいですか? – mrjrdnthms

0

これらのソリューションはすべて私にとっては役に立たなかったし、満足のいくものでもありませんでした。スクロール可能なDIVでは、水平スクロールバーを消すことができますが、垂直スクロールバーは常に存在します。

したがって、すべてのiframeの固定高さを確実に制御できるサイトでは、次の解決策がうまく機能します。 それは単にDIVと水平スクロールバーが非表示になります:)

<!-- This DIV is a special hack to hide the horizontal scrollbar in IE iframes --> 
<!--[if IE]> 
<div id="ieIframeHorScrollbarHider" style="position:absolute; width: 768px; height: 20px; top: 850px; left: 376px; background-color: black; display: none;"> 
</div> 
<![endif]--> 
<script type="text/javascript"> 
    if (document.getElementById("idOfIframe") != null && document.getElementById("ieIframeHorScrollbarHider") != null) 
    { 
    document.getElementById("ieIframeHorScrollbarHider").style.display = "block"; 
    } 
</script> 
0

また、99%のiframe内に含まれるページのボディの幅を設定してみてくださいすることができます。

関連する問題