Comment puis-je déterminer les dimensions de la barre de défilement du navigateur à l'aide de JavaScript ?

Détermination des dimensions de la barre de défilement du navigateur

Comment pouvons-nous déterminer la taille des barres de défilement dans une orientation horizontale ou verticale à l'aide de JavaScript ?

Solution :

Une solution JavaScript a été proposée par Alexandre Gomes Blog, comme cité ci-dessous :

function getScrollBarWidth () {
  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);
}

En créant et en comparant la largeur ou la hauteur des éléments cachés avec et sans l'application de barres de défilement, cette fonction détermine précisément la largeur de la barre de défilement horizontale ou la hauteur de la barre de défilement verticale. barre de défilement.

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!