web-dev-qa-db-ja.com

Safari / Chrome（Webkit）-iframeの垂直スクロールバーを非表示にできない

Www.example.comにsupport.example.com（外部ドメインへのCNAME）を指すiframeがあります。

Iframeの高さを自動的に変更して、フレームに含まれるWebページを表示するためのスクロールバーが不要になるようにします。

FirefoxおよびIEこれはうまく機能し、<iframe ... scrolling="no"></iframe>を使用しているためスクロールバーはありません。ただし、Webkitブラウザー（SafariおよびChrome）では、十分な量がある場合でも垂直スクロールバーが持続しますスクロールバーのないページ用のスペース（スクロールバーはグレー表示されます）。

Webkitブラウザのスクロールバーを非表示にするにはどうすればよいですか？

cssiframesafariwebkitscrollbar
49
BrainCore

私はこの問題に遭遇しましたが、修正はoverflow: hiddeniframe内のページのHTMLタグ。

62
Tim

スクロールバーを非表示にし、スクロール機能を維持できます（タッチパッドまたはスクロールホイールを使用するか、携帯電話またはタブレットでタッチしてドラッグします。

<style>
  iframe::-webkit-scrollbar {  
    display: none;
  }  
</style>

もちろん、iframeをデザインに合わせて変更できます。また、同等の-mozilla-プロパティを追加して、Firefoxでも機能させることができます。

53
palako
Note: this is useful if you cannot edit the CSS / HTML of the iFramed content.

ちょっとしたハックですが、<iframe>を<div>でラップし、<div>の高さ、幅、overflow:hiddenを設定してから<iframe>の幅と高さは、実際にラッピングをオーバーフローします<div>。

<style>
  div {height:100px;width:100px;overflow:hidden}
  iframe {height:150px;width:150px;overflow:hidden}
</style>

<div>
  <iframe src="foo.html" scrolling="no"></iframe>
</div>

お役に立てれば。

16
Labu

私はあなたがこれを試したと仮定していますが、iframeでスクロールをnoに設定しましたか？

<iframe scrolling="no">
11
Shpigford

グレー表示されたスクロールバーを取り除くには、「overflow：hidden;」と入力しますIframeに表示されているページのbodyタグ上。 <body style="overflow:hidden;">これはChrome 8.0.552.215でうまく機能し、iframe自体に「オーバーフロー：隠された」もありました。

6
Simon Jackson

これは役立ちますか？ Chrome、IE、FFで動作します...

<style type="text/css">
html { overflow:hidden; }
#test { position:absolute; top:50; left:50; right:50; bottom:50; height:2000px; }
</style>

<body scroll="no">
<div id="test">content</div>
</body>
3
tpeck

Styleタグの後にscrolling = "no"を付けてブログで解決しました。

例えば：

iframe src="asdf.html" style="overflow: hidden;" scrolling="no"

スタイル属性はより適切であり、Firefoxで正常に機能したため、そこにスタイル属性を残しました。

2
Giles Bowkett

スクロールが本当にiframeからのものであるかどうかを確認してください。HTMLまたはBODYからのものである可能性があります。

Iframeでのスクロール用

<iframe scrolling="no">

CSSで

iframe { overflow:hidden; }

or 

iframe { overflow-x:hidden; overflow-y:hidden}
2
Razielblood

IFRAMEのoverflow-y CSSプロパティをvisibleまたはhiddenに設定できますか？

2
JasonWyatt

Ubuntu 10.10でChrome 8.0.552.224ベータ版を使用すると、このサイトにゴーストスクロールバーが表示されたままになります。 http://www.w3schools.com/TAGS/tryit.asp?filename= tryhtml_iframe_scrolling 。すべてのブラウザで機能するすべてのトリックを試しましたが、WebKitベースのブラウザではそうではありませんでした。

2
harald
_document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });
_

これは機能しますが、タッチスタートのe.preventDefault()を含む他の機能は動作していないようです。

2
foopanda

iframeでスクロールタグをまったく使用せず、style = "overflow-x：hidden; overflow-y：auto;"としてスタイルを追加しないでください。これにより、水平スクロールが削除され、逆方向にも機能するはずです。

-ジャイ

1
Jai

iframeのスクロールを隠すchromeこのようなbodyタグを置く

<body style="margin:0px; padding:0px; overflow:hidden;"></body>
1
Vaidehi

Iframeのスクロール属性を「no」に設定するとshouldが修正されますが、webkitにバグがあるようです： https://bugs.webkit.org/show_bug .cgi？id = 2924

ティムの回避策（ Safari/Chrome（Webkit）-iframeの垂直スクロールバーを非表示にできない ）は、問題を修正しているようです-限りiframeに含まれるドキュメントを編集することができます...

1
Rudi

これを試して...

iframe { overflow:hidden; }
1
Josh Stodola
<iframe> <body style="overflow-x: hidden"> </body> </iframe>
0
Teoman shipahi

1. iframeのスクロールをyesまたはnoに変更すると、iframeのスクロールバーがすぐに表示されないため、iframeを更新する必要があります。

2. iframe coludのHTMLタップオーバーフローはiframeのスクロールバーに影響します

3.IEでは、iframeのsrcをクリアしてからiframeを更新する必要があります

4.so、あなたにコードを見せて

html

<iframe id="main_ifrm" class="main"  frameborder="0" scrolling="no" src="new.html" ></iframe>
<button id="btn1">scrolling yes</button>

javascript

var ifrm = document.getElementById("main_ifrm");
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
    $(ifrm).prop("scrolling","no");
    $(ifrm.contentWindow.document).find("html").css("overflow","hidden")
    var src = $(ifrm).prop("src");
    $(ifrm).prop("src","");
    $(ifrm).prop("src",src);
}
0
kuminson