6

幅 760 ピクセルのランディング ページに取り組んでおり、幅 980 ピクセルのコンテンツ (フラッシュ デモ) を含む iframe が必要です。したがって、コンテンツ全体を表示するには、水平スクロールバーが必要です。ただし、スクロール属性として何を追加しても (例: scrolling="auto/yes" など)、何も起こりません - 水平スクロールバーはまったくありません。

iframe で表示されるページには、ソース コードに次のコマンドがあります。

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    overflow-x: hidden;
}

私が理解している限り、これが私のiframeに水平スクロールバーがない理由です。それを取得するための回避策はありますか？

4

6 に答える 6

3

コンテナに固定幅を適用してiframe、 を含むでラップする必要があります。div

-

HTML

<div class="container">
    <iframe></iframe>
</div>

-

CSS

.container {
    width: 980px;
    height: auto;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}
于 2013-06-14T13:21:48.087 に答える
1

javascript で iFrame (body/child) のオーバーフローを変更してみてください。

何かのようなもの：

window.onload=function(){
 document.getElementById(one).setStyles({ 'overflow': 'auto' });
};

多分これ、どれが iframes コンタントの本体を取得するかわからない:

window.onload=function(){
    var frame = document.getElementById('one'),
    frameDoc = frame.contentDocument || frame.contentWindow.document;
    frameDoc.setStyles({ 'overflow': 'auto' });
};
于 2013-06-17T07:31:54.727 に答える
0

iframe で幅と高さを指定します

overflow-y:hidden; overflow-x:scrolliframeのスタイルを追加します

<iframe width="300" height="315" src="http://webstarts.com" frameborder="0" style="overflow-y:hidden; overflow-x:scroll;"></iframe>

ここにjsFiddleファイルがあります

于 2013-06-14T13:24:24.690 に答える
0

ここでのセルジオの回答に続いて、jQueryを使用して同じ問題を抱えていることに気付いたときに私がしたことは次のとおりです。

  • iframeを取る
  • 体を探す
  • 別のオーバーフロー プロパティを適用する

$('#iframe').contents().find('body').css('overflow', 'auto');

もちろん、ページが完全に読み込まれると、これらすべてが行われます。

$(document).ready(function() {...});

期待どおりにスクロールバーが表示されるようになりました

于 2013-12-10T18:02:15.710 に答える