Wie erhalte ich mit JavaScript die Abmessungen der Browser-Bildlaufleiste?

Abmessungen der Browser-Bildlaufleisten in JavaScript ermitteln

Bei der Webentwicklung kann die Bestimmung der Abmessungen von Bildlaufleisten aus ästhetischen und funktionalen Gründen von entscheidender Bedeutung sein. JavaScript bietet eine vielseitige Möglichkeit, diese Informationen abzurufen, sodass Entwickler Benutzeroberflächenelemente anpassen und die Benutzererfahrung verbessern können.

Höhe der horizontalen Bildlaufleiste bestimmen

Um die Höhe einer Horizontalen zu ermitteln Scrollbar verwendet JavaScript einen vielschichtigen Ansatz:

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

Bestimmen der vertikalen Scrollbar Breite

In ähnlicher Weise bietet der folgende JavaScript-Code für vertikale Bildlaufleisten eine zuverlässige Lösung:

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

Durch die Nutzung dieser JavaScript-Funktionen können Entwickler die Abmessungen von Browser-Bildlaufleisten genau abrufen. Ermöglicht eine präzise Kontrolle über das Design und die Funktionalität der Benutzeroberfläche.

Das obige ist der detaillierte Inhalt vonWie erhalte ich mit JavaScript die Abmessungen der Browser-Bildlaufleiste?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!