JavaScriptでスクロールバーの位置を設定および制御する方法

フロントエンド開発では、ページがスクロールされたときに指定された位置が正確に配置されるように、ページのスクロール バーの位置を設定する必要があることがよくあります。 JavaScriptではスクロールバーの位置を設定・制御するメソッドがいくつかありますので、この記事ではそれらのメソッドを紹介します。

スクロール バーの位置を取得する

スクロール バーの位置を設定する前に、まず現在のページのスクロール バーの位置を取得する必要があります。 JavaScript では、次の 2 つのプロパティを通じてスクロール バーの位置を取得できます:

• window.pageXOffset または window.scrollX: 水平スクロールを取得します。ページバーの位置。
• window.pageYOffset または window.scrollY: ページの垂直スクロール バーの位置を取得します。

これら 2 つのプロパティは、ピクセル値を表す数値を返します。たとえば、ページが 100 ピクセル下にスクロールすると、window.pageYOffset の値は 100 になります。

スクロール バーの位置を設定する

スクロール バーの位置を取得した後、いくつかのメソッドを使用してスクロール バーの位置を設定できます。

scroll() メソッド

scroll() メソッドは、ページのスクロール バーの位置を設定するために使用できます。このメソッドは、水平スクロール距離と垂直スクロール距離という 2 つのパラメーターを受け入れます。これらは、ページの scrollLeft プロパティと scrollTop プロパティにそれぞれ対応します。たとえば、次のコードは、水平方向に 100 ピクセル、垂直方向に 200 ピクセルスクロールするようにページのスクロール バーの位置を設定します。 # メソッドは

scroll()

メソッドに似ており、ページのスクロール バーの位置を設定するためにも使用できます。ただし、

scrollTo()

メソッドは、スクロール バーの位置をより柔軟に制御するパラメータとしてオブジェクトを受け入れることができるため、より一般的に使用されます。このオブジェクトには、left と top という 2 つのプロパティが含まれており、それぞれページの scrollLeft プロパティと scrollTop プロパティに対応します。たとえば、次のコードは、水平方向に 100 ピクセル、垂直方向に 200 ピクセルスクロールするようにページのスクロール バーの位置を設定します。 <pre class="brush:php;toolbar:false">window.scroll(100, 200);</pre>scrollBy() メソッド scrollBy()# # メソッドはページのスクロール バーの位置を設定するためにも使用されますが、最初の 2 つのメソッドとは異なり、scrollBy()

メソッドのパラメーターは絶対的なスクロール距離ではなく、相対的なスクロール距離を表します。たとえば、次のコードはページを垂直に 100 ピクセルスクロールします。

window.scrollTo({ left: 100, top: 200 });

scrollIntoView() メソッド

scrollIntoView() メソッドは、指定された要素を表示領域にスクロールします。このメソッドは、指定された位置までスクロールするためにアニメーション効果を使用するかどうかを示すブール値をオプションのパラメーターとして受け入れます。たとえば、次のコードは、HTML ドキュメントの最初の段落要素を表示領域までスクロールします。

window.scrollBy(0, 100);

上記のコードでは、オプションのパラメーターが使用されていない場合、デフォルトではアニメーション効果はありません。

互換性の問題

上記の方法を使用してスクロール バーの位置を設定する場合は、さまざまなブラウザの互換性の問題に注意する必要があります。このうち、IE ブラウザはスクロール バーの位置を 10 進数値に設定することをサポートしていますが、他の主流ブラウザはサポートしていません。異なるブラウザで一貫した効果を実現する必要がある場合は、次のメソッドを使用できます。

document.getElementsByTagName('p')[0].scrollIntoView();

このメソッドは、まずブラウザが

scrollTo()

メソッドをサポートしているかどうかを判断し、サポートしている場合は、直接呼び出します。このメソッドはスクロール バーの位置を設定します。それ以外の場合は、

scrollTop

プロパティと

scrollLeft

プロパティを使用してスクロール バーの位置を設定します。

以上がJavaScriptでスクロールバーの位置を設定および制御する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。