9

私はフルページのiframeを持っていますが、クロムではスクロールバーが最初にロードされてから消え、そのための部屋があり、使用できますが表示されません。PC の safari と firefox と chrome で完璧に動作しますが、Mac ではスクロール バーのウェルが表示されますが、バー自体がありません。

body,html{
    height:100%;
    overflow:hidden;
}
#me-branding-bar{
    overflow:hidden;
    width:100%;
    height:40px;
    position:relative;
    background-color:#ff9900;
}
#me-content{
    height:100%;
    width:100%;
    position:relative;
    border:1px solid #ff9900;
}
#me-content iframe{
    border:1px solid #000;
    overflow:scroll;
}

<div id="me-branding-bar">

</div>

<div id="me-content">
    <iframe border="0" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" src="<?php echo $url;?>" style="overflow:visible;height:100%;width:100%;" height="100%" width="100%"></iframe>
</div>

http://jsfiddle.net/RYwty/

4

5 に答える 5

13

<iframe>Mac で Chrome を使用するとスクロールバーが消えるのはなぜですか?

<iframe>外部サイトのページ全体が含まれている場合、これはかなり幅広い質問です。いくつかのステップに分けてみましょう。

次の例では、Mac で Chrome を使用することを前提としています。

簡単なテストを行う

非常に単純な HTML ページを作成して に配置<iframe>し、Mac 上の Chrome で表示します ( DEMO )。

スクロールバーは消えません。すべて問題ないようです。そのため、外部サイトの何かが問題を引き起こしている可能性が最も高いです。

外部サイトをデバッグする

症状としては、スクロールバーが消える前に実際には非常に短い時間だけ表示されますが、ページはまだスクロール可能です。JavaScript が問題を引き起こしているのではないでしょうか? JavaScript を無効にして試してみましょう。

JavaScript を無効にしてもスクロールバーが消えないことがわかりました。そのため、JavaScript によってロードされた何かが問題を引き起こしています。さらにデバッグすると、Flash オブジェクトが原因であることがわかります。

別のテストを行う

簡単な HTML テスト ページを 2 つ作成し、そのうちの 1 つに Flash オブジェクトを追加します。それらを異なる<iframe>sに入れ、それらを比較して違いを確認します。

<object type="application/x-shockwave-flash"></object>

フラッシュ オブジェクトを含むものには、スクロールバーが表示されないことがわかりました。

結論

通常の ではスクロールバーが消えませんが<iframe>、フラッシュオブジェクトがあるものではスクロールバーが消えません。バグかもしれませんし、意図的なダーティーハックかもしれません。多くのフラッシュ広告とビデオは で提供され<iframe>、スクロールバーを表示するのは見栄えがよくありません。

しかし重要なのは、あなたはあなたの外部コンテンツを提供していて<iframe>、これらはあなたが制御できないものだということです.

<iframe src="<?php echo $url;?>"></iframe>

1 つまたは 2 つの問題を解決するために最善を尽くすことができるかもしれませんが、外部ページではあちこちで問題が発生する可能性があることが数多く発生しています。JavaScript と HTTP ヘッダーの助けを借りて、自分のサイトが に配置されるのを防ぐ<iframe>ことさえできます。ページが読み込まれる限り、満足するはずです。スクロールバーが消えるなどの細かいことはあまり気にしないでください。ページが実際にスクロール可能でない場合にのみ心配してください。あなたはMacでスクロールについて話している。ほとんどの場合、これはスクロールバーではなくジェスチャーによって行われます。

外部コンテンツをさらに制御したい場合は、cURLを使用してサーバー側にロードし、HTML パーサーを使用してコンテンツを変更することを検討してください。

于 2014-01-01T04:03:31.793 に答える
2

以下のコードは、Mac 上の Chrome での iframe スクロールバーの問題を解決しているようです。

この修正は、Mac および PC 上の Firefox、Safari、および Opera と互換性のあるクロスブラウザーです。

jsfiddle

HTML:

<div id="me-branding-bar"></div>

    <div id="me-content">
        <iframe src="http://tsn.ca" height="100%" width="100%" class="iframeclass"></iframe>
    </div>

CSS:

body,html{height:100%;overflow:hidden;}
        #me-branding-bar{overflow:hidden;z-index:102;width:100%;height:40px;position:relative;background-color:#ff9900;}
        #me-content{height:100%;width:100%;position:relative;border:1px solid #ff9900;}
        #me-content iframe{border:1px solid #000;}

.iframeclass::-webkit-scrollbar {
    width:10px;
}

.iframeclass::-webkit-scrollbar-track {
    -webkit-border-radius:5px;
    border-radius:5px;
    background:rgba(0,0,0,0.02);
}

.iframeclass::-webkit-scrollbar-thumb {
    -webkit-border-radius:5px;
    border-radius:5px;
    background:rgba(0,0,0,0.3);
}

.iframeclass::-webkit-scrollbar-thumb:hover {
    background:rgba(0,0,0,0.3);
}

.iframeclass::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(0,0,0,0.3);
}
于 2014-01-01T21:41:14.547 に答える
0

HTML からスタイルを削除し、scrolling="yes" >> http://jsfiddle.net/95Tes/を追加します。

<!--same code as before just remove your css styles from the html -->
于 2013-12-31T14:22:58.850 に答える
0 
*{
   margin:0; 
   padding:0;
}
html, body{
   height:100%; 
   width:100%;
}
#me-branding-bar{
   width:100%; 
   height:10%; 
   position:relative; 
   background-color:#ff9900; 
   display:block;
}
#me-content{
   display:block; 
   height:90%; 
   width:100%; 
   position:relative; 
   border:none;
}
#me-content iframe{
   border:none; 
   display:block; 
   overflow:auto;
}
::-webkit-scrollbar{-webkit-appearance: scrollbarthumb-vertical;}

リンク1 リンク 2

jsfiddle

于 2013-12-31T14:05:08.593 に答える
0

このコードはあなたを助けるかもしれません.私はMacを持っていないので、否定的な点を与えないでください..

<iframe border="0" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" src="http://www.tsn.ca" style="overflow:visible;height:100%;width:100%;"></iframe>


#me-content iframe{
    border:1px solid #000;
    overflow:scroll;
}

別のタブで画像を見るか、最初に画像を保存して、より鮮明に見てください。 ここに画像の説明を入力

cssとhtmlを修正したこのコードを使用してください

       <style>
*{
    margin:0px;
    paddinig:0px;
    }

body,html{
    height:100%;
    overflow:hidden;
}
#me-branding-bar{
    overflow:hidden;
    width:100%;
    height:40px;
    position:relative;
    background-color:#ff9900;
}
#clearboth {
   clear:both;
}
#me-content{
    height:calc(100% - 40px);
    width:100%;
    position:relative;
    border:1px solid #ff9900;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
}
#me-content iframe{
    border:1px solid #000;
    overflow:scroll;
    width:100%;
    height:100%;
}

       </style>

ここに変更されたhtmlがあります

         <div id="me-branding-bar">

        </div>

        <div id="clearboth"></div>

        <div id="me-content">
            <iframe border="0" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"
            src="http://www.tsn.ca"></iframe>
        </div>

それがうまくいくことを願っています！

于 2013-12-31T16:13:32.957 に答える