恐ろしい iframe の水平スクロール バーは IE では削除できませんか?

StackOverflow https://stackoverflow.com/questions/67354

  •  09-06-2019
  •  | 
  •  

質問

iframe があります。コンテンツの幅が設定している幅より広いため、iframe に水平スクロール バーが表示されます。iframeの幅を広げることはできないので、スクロールバーを削除したいだけです。スクロールプロパティを「no」に設定しようとしましたが、両方のスクロールバーが無効になるため、垂直スクロールバーが必要です。overflow-x を「hidden」に設定しようとしましたが、ff では水平スクロール バーが消えましたが、IE では消えませんでした。私にとって悲しい。

役に立ちましたか？

解決 

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

それを iFrame タグに入れます。

CSS でこれをフォーマットしようとしてあれこれいじる必要はありません。

他のヒント

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

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>

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

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

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

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

CSS で適切にスタイル設定できれば良いのですが、IE では機能しません。

これらの解決策はすべて私にとっては効果がなかったか、満足のいくものではありませんでした。スクロール可能な 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>

iframe 内に含まれるページの本文の幅を 99% に設定してみることもできます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top