Wie kann ich mithilfe von JavaScript die Abmessungen von Browser-Bildlaufleisten ermitteln?

Ermitteln der Abmessungen der Browser-Bildlaufleiste in JavaScript

Die Bestimmung der Abmessungen der Bildlaufleisten in einem Browser ist für die Erstellung dynamischer Webseiten von entscheidender Bedeutung. In diesem Artikel wird eine Methode zum Bestimmen der Höhe horizontaler Bildlaufleisten und der Breite vertikaler Bildlaufleisten mithilfe von JavaScript untersucht.

Lösung:

Das unten bereitgestellte Codefragment berechnet die Breite von eine vertikale Bildlaufleiste mit einem cleveren Technik.

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);
}

Erklärung:

Diese Funktion erstellt zwei Elemente, ein inneres Element (inner) und ein äußeres Element (äußer). Das innere Element hat eine feste Größe, während für das äußere Element die Überlaufeigenschaft nicht festgelegt ist. Der Breitenunterschied zwischen diesen Elementen nach der Aktivierung des Überlaufs für das äußere Element stellt die Breite der vertikalen Bildlaufleiste dar.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von JavaScript die Abmessungen von Browser-Bildlaufleisten ermitteln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!