Comment obtenir les dimensions de la barre de défilement du navigateur à l'aide de JavaScript ?-js tutoriel-php.cn

Comment obtenir les dimensions de la barre de défilement du navigateur à l'aide de JavaScript ?

Patricia Arquette

Libérer： 2024-11-28 17:33:19

original

874 Les gens l'ont consulté

How to Get Browser Scrollbar Dimensions Using JavaScript?

Obtention des dimensions des barres de défilement du navigateur en JavaScript

Dans le développement Web, la détermination des dimensions des barres de défilement peut être cruciale à des fins esthétiques et fonctionnelles. JavaScript fournit un moyen polyvalent de récupérer ces informations, permettant aux développeurs d'ajuster les éléments de l'interface utilisateur et d'améliorer l'expérience utilisateur.

Détermination de la hauteur de la barre de défilement horizontale

Pour obtenir la hauteur d'une barre de défilement horizontale barre de défilement, JavaScript utilise une approche à multiples facettes :

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

Copier après la connexion

Détermination de la barre de défilement verticale Largeur

De même, pour les barres de défilement verticales, le code JavaScript ci-dessous offre une solution fiable :

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

Copier après la connexion

En exploitant ces fonctions JavaScript, les développeurs peuvent récupérer avec précision les dimensions des barres de défilement du navigateur, permettant un contrôle précis sur la conception et les fonctionnalités de l'interface utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!