iframe タグでスクロールバースタイルを作成する方法と、iframe タグの使用法を紹介します。-htmlチュートリアル-php.cn

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

寻∝梦

リリース： 2018-08-28 16:57:13

オリジナル

6050 人が閲覧しました

この記事では、主に 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(&#39;getHeight&#39;,100);
function getHeight(){
    if(document.readyState == &#39;complete&#39;){
        var height = (document.body.scrollHeight)+&#39;px&#39;;
        $(&#39;parentdiv&#39;,window.parent.document).css(&#39;height&#39;,height);
        window.clearInterval(gh);
    }
}

ログイン後にコピー

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

【編集者のおすすめ】

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

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

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