ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript でスクロールバーの位置を決定するにはどうすればよいですか?

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

Barbara Streisand
リリース: 2024-11-17 04:07:03
オリジナル
1041 人が閲覧しました

How Do I Determine Scrollbar Position in JavaScript?

JavaScript を使用したスクロールバーの位置の決定

Web ページを移動するとき、現在のビューを理解するためにスクロールバーの位置を決定することが必要になることがよくあります。 。最初の予感とは異なり、JavaScript はサムとトラックのディメンションを計算する必要のない簡単な解決策を提供します。

解決策:

JavaScript は要素のscrollTop プロパティとscrollLeft プロパティを提供します。ページ全体を表す document.body など。これらのプロパティは、それぞれ垂直スクロール位置と水平スクロール位置を提供します。

スクロールバーのオフセットの割合を取得するには、スクロール位置を要素の高さまたは幅の合計と比較します。ページの場合は、 document.body.offsetHeight と document.body.offsetWidth を適宜使用します。

コード例:

// Get the scrollbar position from the body
var scrollTop = document.body.scrollTop;
var scrollLeft = document.body.scrollLeft;

// Calculate the percentage offset of the scrollbar
var percentScrollTop = scrollTop / (document.body.scrollHeight - document.body.offsetHeight);
var percentscrollLeft = scrollLeft / (document.body.scrollWidth - document.body.offsetWidth);
ログイン後にコピー

scrollTop とscrollLeft を利用すると、次のことができます。現在のスクロールバーの位置とそれに対応するオフセットのパーセンテージを簡単に特定できるため、Web アプリケーションのページ スクロールとの対話を強化するのに便利です。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート