iframe タグでスクロール バー スタイルを作成する方法と、iframe タグの使用法を紹介します。

この記事では、主に HTML iframe タグのスクロールの問題について説明します。この記事では、iframe タグのスクロール バーの保持と保存、および動的な高さの iframe を読み込んだ後の二重スクロール バーなどの問題の解決について説明します。まず記事を読みましょう。 HTML iframe タグのスクロール バーの削除と保存を見てみましょう:

iframe がページに埋め込まれた後、スクロール バーを調整する必要がある場合があります。たとえば、すべてのスクロール バーを削除したり、右側のスクロール バーを削除したりします。バーを削除し、下部のスクロール バーを維持します。下部のスクロール バーを削除し、右側のスクロール バーを維持します。だから何をすべきか？

1: すべてのスクロール バーを削除します

最初の方法: iframe には、auto、yes、no の 3 つの値を持つスクロール属性があります。

スクロール : 自動 -----必要に応じてスクロール バーが表示されます

スクロール : はい -------常にスクロール バーを表示します

スクロール : いいえ -------常にスクロール バーを非表示

スクロール: no が設定されている場合、すべてのスクロール バーが消えます。

2 番目の方法: スクロールしてすべてのスクロール バーを削除する以外に、埋め込みページに body{overflow: hidden} を設定してスクロール バーも削除できるようにする別の方法があることがわかりました。これも同様です。この場合、特定のスクロール バーで使用されるプロパティのみを削除したいと考えます。

2 つ: 右側のスクロール バーを削除し、下部のスクロール バーを保持します

下部のスクロール バーのみを保持したい場合は、埋め込みページに本文を設定できます {overflow-x: auto; overflow-y: hidden; ; }

3: 下部のスクロール バーを削除し、右側にスクロール バーを残します

埋め込みページに本文を設定します{overflow-x: hidden; overflow-y: auto;}

この2つのプロパティはどちらもスクロールバーの表示・非表示を設定できるので、両方を同時に設定するとどちらの効果が起こるのでしょうか？

検出により、scroll="auto" または "yes" の場合、本文が設定されている場合、scroll="no" の場合は、本文の設定に関係なく、本文の設定が使用されることがわかりました。使用される設定、つまりすべてのスクロール バーが削除されます。

次に、水平スクロールバーを削除する方法について話しましょう:

は次の方法で削除できます:

iframe に含まれる Web ページに

<style>
html { overflow-x:hidden; }
</style>

を追加して、水平スクロール バーを削除することもできます。同じように垂直スクロールバーを削除します。

動的な高さを持つ iframe をロードした後の二重スクロール バーの問題を解決します。

iframe データが ajax を通じて非同期でロードされる場合、内部の div の高さも動的に取得されます。 div 内のコンテンツがロードされていません。 はい、上記の var height は、ajax をロードした後でも、実際の高さを取得することはできません。メソッドをロードする前に、すべてのドキュメント ツリーがロードされるまで待つ必要があります。実際の高さを取得するには

で書かれた究極のバージョンです。 iframe ページ

var ht = setInterval('getHeight',100);
function getHeight(){
    if(document.readyState == 'complete'){
        var height = (document.body.scrollHeight)+'px';
        $('parentdiv',window.parent.document).css('height',height);
        window.clearInterval(gh);
    }
}

にはもっと簡単な解決策があるかもしれませんが、これは私が遭遇し、段階的に解決したアイデアとコードです。記録する価値があります。もちろん、スクロール属性を使用することもできます。簡単な方法があれば、一緒に議論できます

【編集者のおすすめ】

HTML相対パスのベースタグ? (使い方説明付き)

HTMLのimgタグのsrc属性の使い方とは？具体的な使用方法の分析（例付き）

以上がiframe タグでスクロール バー スタイルを作成する方法と、iframe タグの使用法を紹介します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。