JavaScriptでスクロールバーの位置を取得するにはどうすればよいですか?

JavaScript を使用したスクロールバーの位置の取得

Web ページ上の現在のビュー位置を決定するには、JavaScript を使用してスクロールバーの位置を確認できます。このガイドでは、これを実現する方法を説明します。

スクロールバーの位置を取得するには、element.scrollTop プロパティと element.scrollLeft プロパティを利用できます。これらのプロパティは、それぞれスクロールされた要素の垂直オフセットと水平オフセットを返します。ページ全体に興味がある場合は、要素を document.body.

に設定してパーセンテージを決定するには、オフセット値を element.offsetHeight および element.offsetWidth と比較します。繰り返しますが、要素はドキュメントの本文にすることができます。

これらのプロパティの使用法を示すコード スニペットの例を次に示します。

// Get the vertical scroll position of the document
const verticalScrollPos = document.body.scrollTop;

// Get the horizontal scroll position of the document
const horizontalScrollPos = document.body.scrollLeft;

// Get the height and width of the document
const documentHeight = document.body.offsetHeight;
const documentWidth = document.body.offsetWidth;

// Calculate the percentage of the vertical scroll position
const verticalScrollPercentage = (verticalScrollPos / documentHeight) * 100;

// Calculate the percentage of the horizontal scroll position
const horizontalScrollPercentage = (horizontalScrollPos / documentWidth) * 100;

以上がJavaScriptでスクロールバーの位置を取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。