Comment puis-je obtenir les dimensions des barres de défilement du navigateur à l'aide de JavaScript ?

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

La détermination des dimensions des barres de défilement dans un navigateur est essentielle pour créer des pages Web dynamiques. Cet article explore une méthode pour déterminer la hauteur des barres de défilement horizontales et la largeur des barres de défilement verticales à l'aide de JavaScript.

Solution :

L'extrait de code fourni ci-dessous calcule la largeur de une barre de défilement verticale utilisant un astucieux technique.

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

Explication :

Cette fonction crée deux éléments, un élément intérieur (inner) et un élément extérieur (externe). L'élément interne a une taille fixe tandis que l'élément externe n'a pas de propriété de débordement définie. La différence de largeur entre ces éléments après activation du débordement sur l'élément extérieur représente la largeur de la barre de défilement verticale.

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!