如何使用 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中文網其他相關文章！