jqueryはiframeのスクロールバーの位置を設定します

インターネット技術の継続的な発展に伴い、サードパーティの Web ページまたは部分的なコンテンツを表示するために Web ページで iframe (埋め込みフレーム) がよく使用されます。ただし、iframe のスクロール バーの位置を期待どおりの位置に設定したい場合は、jQuery を使用する必要があります。

この記事では、jQuery を使用して iframe スクロール バーの位置を設定し、Web コンテンツをより美しく、使いやすくする方法を学習します。

まず、iframe とは何かを理解する必要があります。簡単に言えば、iframe は、Web ページ内に他の Web ページまたは Web ページの一部を埋め込むために使用される HTML マークアップ言語要素です。このうち、scrolling 属性は、iframe にスクロール バーを表示するかどうかを制御できます。 [はい] (スクロール バーを表示)、[いいえ] (スクロール バーを表示)、または [自動] (必要に応じてスクロール バーを表示) に設定できます。

デフォルトでは、スクロール属性が設定されていない場合、iframe は自動的にスクロール バーを表示します。

次に例を見てみましょう。自動スクロール コンテンツを表示する iframe を含む Web ページがあるとします。ただし、Web ページの読み込み後に iframe スクロールバーを最上部の位置に設定したいと考えています。

これは、次のコードで実現できます:

$(document).ready(function() {
  $("#myFrame").load(function() {
    $("#myFrame").contents().scrollTop(0);
  });
});

まず、ドキュメントがロードされた後、jQuery セレクターを使用して iframe を選択し、onload イベントを登録します。

2 番目に、iframe がロードされた後、contents() メソッドを使用して iframe 内のコンテンツを選択し、scrollTop() メソッドを使用してスクロール バーの位置を 0 (上部の位置) に設定します。 。

contents() メソッドを通じて iframe 内のコンテンツを選択するには、iframe 内のコンテンツがロードされるまで待つ必要があることに注意してください。

iframe スクロール バーの位置を別の位置に設定する必要がある場合は、scrollTop() メソッドのパラメーターを目的の位置に設定するだけです。

最後に、スクロール バーが繰り返されるのを避けるために、iframe のスクロール属性を no に設定する必要があります。この属性は、iframe タグの作成時に設定することも、次のコードで変更することもできます。

$("#myFrame").attr("scrolling", "no");

jQuery の attr() メソッドを使用して iframe を選択し、スクロール属性を no に設定します。

上記の操作により、iframe のスクロール バーの位置を自由に制御して、希望する効果を実現できます。

要約すると、この記事を通じて、jQuery を使用して iframe スクロール バーの位置を設定する方法を学びました。 content() メソッドとscrollTop() メソッドを使用すると、iframe 内のコンテンツのスクロールを制御できます。同時に、スクロール バーの重複を避けるために、スクロール属性を設定することを忘れないでください。

この記事が、読者が iframe についてより深く理解するのに役立ち、読者がこの記事で紹介した方法をマスターして、Web デザインと開発にさらに刺激的な可能性をもたらすことを願っています。

以上がjqueryはiframeのスクロールバーの位置を設定しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。