JavaScript を使用してブラウザのスクロールバーのサイズを取得するにはどうすればよいですか?

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

ブラウザのスクロールバーの寸法を決定することは、動的な Web ページを作成するために不可欠です。この記事では、JavaScript を使用して水平スクロールバーの高さと垂直スクロールバーの幅を決定する方法について説明します。

解決策:

以下に示すコード スニペットは、スクロールバーの幅を計算します。賢い機能を使用した垂直スクロールバー

function getScrollBarWidth() {
  // Create elements to measure scrollbar size
  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);

  // Add elements to the DOM
  document.body.appendChild(outer);

  // Calculate scrollbar width
  var w1 = inner.offsetWidth;
  outer.style.overflow = 'scroll';
  var w2 = inner.offsetWidth;
  if (w1 == w2) w2 = outer.clientWidth;

  // Remove elements from the DOM
  document.body.removeChild(outer);

  // Return scrollbar width
  return (w1 - w2);
}

説明:

この関数は、内側要素 (inner) と外側要素 (outer) の 2 つの要素を作成します。内側の要素は固定サイズですが、外側の要素にはオーバーフロー プロパティが設定されていません。外側の要素でオーバーフローを有効にした後のこれらの要素間の幅の差は、垂直スクロールバーの幅を表します。

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