Wie erhalte ich mit JavaScript die Abmessungen der Browser-Bildlaufleiste?-js-Tutorial-php.cn

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

Patricia Arquette

Freigeben： 2024-11-28 17:33:19

Original

874 Leute haben es durchsucht

How to Get Browser Scrollbar Dimensions Using JavaScript?

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!