ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript を使用してブラウザのスクロールバーの寸法を取得する方法?

JavaScript を使用してブラウザのスクロールバーの寸法を取得する方法?

Patricia Arquette
リリース: 2024-11-28 17:33:19
オリジナル
873 人が閲覧しました

How to Get Browser Scrollbar Dimensions Using JavaScript?

JavaScript でブラウザのスクロールバーの寸法を取得する

Web 開発では、スクロールバーの寸法を決定することは、美的および機能的な目的で重要な場合があります。 JavaScript は、この情報を取得する多目的な方法を提供し、開発者が UI 要素を調整してユーザー エクスペリエンスを向上できるようにします。

水平スクロールバーの高さの決定

水平スクロールバーの高さを取得するにはスクロールバー、JavaScript は多面的な機能を利用しますアプローチ:

function getHorizontalScrollbarHeight() {
  var inner = document.createElement('p');
  inner.style.width = "100%";
  inner.style.height = "200px";

  var outer = document.createElement('div');
  outer.style.position = "absolute";
  outer.style.top = "0px";
  outer.style.left = "0px";
  outer.style.visibility = "hidden";
  outer.style.width = "200px";
  outer.style.height = "150px";
  outer.style.overflow = "hidden";
  outer.appendChild(inner);

  document.body.appendChild(outer);
  var w1 = inner.offsetWidth;
  outer.style.overflow = 'scroll';
  var w2 = inner.offsetWidth;
  if (w1 == w2) w2 = outer.clientWidth;

  document.body.removeChild(outer);

  return (w1 - w2);
}
ログイン後にコピー

垂直スクロールバーの幅の決定

同様に、垂直スクロールバーについては、以下の JavaScript コードが信頼できるソリューションを提供します。

function getVerticalScrollbarWidth() {
  var inner = document.createElement('p');
  inner.style.height = "100%";
  inner.style.width = "200px";

  var outer = document.createElement('div');
  outer.style.position = "absolute";
  outer.style.top = "0px";
  outer.style.left = "0px";
  outer.style.visibility = "hidden";
  outer.style.width = "150px";
  outer.style.height = "200px";
  outer.style.overflow = "hidden";
  outer.appendChild(inner);

  document.body.appendChild(outer);
  var w1 = inner.offsetHeight;
  outer.style.overflow = 'scroll';
  var w2 = inner.offsetHeight;
  if (w1 == w2) w2 = outer.clientHeight;

  document.body.removeChild(outer);

  return (w1 - w2);
}
ログイン後にコピー

これらの JavaScript 関数を活用することで、開発者はブラウザのスクロールバーの寸法を正確に取得でき、UI を正確に制御できるようになります。デザインと機能性。

以上がJavaScript を使用してブラウザのスクロールバーの寸法を取得する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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