HTMLiframe-スクロールを無効にする

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

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

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

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

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で動作します。

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

    pointer-events:none;

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

html, body { overflow: hidden; }

IFrame内

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

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

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

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

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

現在のブラウザ（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>

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

overflow-x:hidden;
overflow-y:hidden;

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

iframe body { overflow:hidden; }

これは驚くほどでしたそれらの迷惑なスクロールバーを削除し、Firefoxで仕事を。

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

以下のいずれかのオプションのようなスタイルの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>

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

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

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

このフレームの場合：

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

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

    iframe#put the value of id here::-webkit-scrollbar {
         display: none;
    }

html5バージョン以下

iframe {
    overflow:hidden;
}

html5で

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


iframe[seamless]{

   overflow: hidden;
}

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

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

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

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