94

私のサイトには次のiframeがあります。

<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no" style="overflow: hidden"></iframe>

そして、それはスクロールバーを持っています。
それらを取り除く方法は？

4

12 に答える 12

182

残念ながら、HTMLとCSSのプロパティだけでHTML5に完全に準拠することは不可能だと思います。ただし、幸いなことに、ほとんどのブラウザは引き続きプロパティをサポートしています（ HTML5仕様scrollingから削除されました）。

overflowこれを誤ってサポートしている最新のブラウザはFirefoxだけなので、はHTML5のソリューションではありません。

現在の解決策は、2つを組み合わせることです。

<iframe src="" scrolling="no"></iframe>

iframe {
  overflow: hidden;
}

ただし、ブラウザが更新されると、これは廃止される可能性があります。JavaScriptソリューションについてこれを確認することをお勧めします：http：//www.christersvensson.com/html-tool/iframe.htm

編集：確認しscrolling="no"ました。IE10、Chrome 25、Opera12.12で動作します。

于 2013-03-19T08:52:31.993 に答える
22

私はこのcssで同じ問題を解決しました：

    pointer-events:none;
于 2014-12-15T09:38:10.183 に答える
12

を使用して動作するようです

html, body { overflow: hidden; }

IFrame内

編集：もちろん、これは、Iframeのコンテンツ（私の場合は持っている）にアクセスできる場合にのみ機能します

于 2016-05-20T11:37:38.440 に答える
2

すべてのコンテンツを次のように設定します。

#yourContent{
 width:100%;
height:100%;  // in you csss
}

重要なのは、iframeのスクロールは、iframe自体ではなく、コンテンツによって設定されるということです。

CSSを使用して内部のコンテンツを100％に設定し、HTMLのiframeに必要なものを設定します

于 2016-06-19T06:01:59.293 に答える
1

現在のブラウザ（Google Chromeバージョン60.0.3112.113（公式ビルド）（64ビット））でscrolling = "no"を試しましたが、機能しませんでした。ただし、scroll="no"は機能しました。試す価値があるかもしれません

<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scroll="no" style="overflow: hidden"></iframe>
于 2017-09-16T13:42:20.497 に答える
0

「オーバーフロー：非表示」以降。プロパティはiFrame自体では正しく機能しませんが、 iFrame内のページの本文に適用すると結果が得られるようです。これを試してみました：

iframe body { overflow:hidden; }

これは驚くべきことにFirefoxで機能し、これらの迷惑なスクロールバーを削除しました。

ただし、Safariでは、iframeの右側、コンテンツと境界線の間に、幅2ピクセルの奇妙な透明線が表示されています。変。

于 2016-05-27T10:45:50.847 に答える
0

これは私のために働きます：

<style>
*{overflow:hidden!important;}
html{overflow:scroll!important;}
</style>

注：他の要素にスクロールバーが必要な場合は、その要素にもcss{overflow:scroll!important;}を追加してください

于 2020-06-28T14:27:08.927 に答える
-1

このスタイルをiframeタグに追加します。 

overflow-x:hidden;
overflow-y:hidden;
于 2013-03-19T08:27:37.327 に答える
-1

以下のいずれかのオプションのようなスタイルのiframeを追加するだけです。これで問題が解決することを願っています。

最初のオプション：

<iframe src="https://www.skyhub.ca/featured-listing" style="position: absolute; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="400px" width="1200px" allowfullscreen></iframe>

2番目のオプション：

<iframe src="https://www.skyhub.ca/featured-listing" style="display: none;" onload="this.style.display='block';" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="400px" width="1200px" allowfullscreen></iframe>
于 2019-08-30T23:26:08.980 に答える
-2

このフレームの場合：

    <iframe src="" name="" id=""></iframe>

私は自分のCSSコードでこれを試しました：

    iframe#put the value of id here::-webkit-scrollbar {
         display: none;
    }
于 2016-03-17T02:25:43.967 に答える
-3

以下のhtml5バージョン

iframe {
    overflow:hidden;
}

html5で

<iframe seamless="seamless"  ....>


iframe[seamless]{

   overflow: hidden;
}

しかし、まだ正しくサポートされていません

于 2013-03-19T09:00:14.940 に答える
-6

次のCSSコードを使用できます。

margin-top: -145px; 
margin-left: -80px;
margin-bottom: -650px;

iframeの表示を制限するため。

于 2015-12-24T22:47:22.620 に答える