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

JavaScript ベースのスクロールバー位置の決定

ブラウザのスクロールバーの位置を検出することは、ビューポートの現在の位置を理解するための基本的なタスクです。この課題を探るために JavaScript をさらに深く掘り下げてみましょう。

最初に、トラックに沿ったサムの位置を決定し、その高さをトラック全体の高さのパーセンテージとして計算することを検討します。ただし、JavaScript では、より簡単なアプローチが提供されています。

垂直スクロール オフセットと水平スクロール オフセットを取得するには、element.scrollTop プロパティと element.scrollLeft プロパティを使用します。ページ全体に興味がある場合は、要素として document.body を使用します。パーセンテージを計算するには、これらのオフセットを element.offsetHeight および element.offsetWidth と比較します (要素は本体またはその他の関連要素のままです)。

例:

// Get the vertical scroll offset
let verticalOffset = document.body.scrollTop;

// Get the horizontal scroll offset
let horizontalOffset = document.body.scrollLeft;

// Calculate the vertical scroll percentage
let verticalPercentage = verticalOffset / document.body.offsetHeight * 100;

// Calculate the horizontal scroll percentage
let horizontalPercentage = horizontalOffset / document.body.offsetWidth * 100;

// Utilize the obtained percentages for your desired functionality

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