Comment puis-je détecter par programme le débordement de contenu d'un élément HTML sans barres de défilement ?

Détection du débordement de contenu d'un élément HTML sans barres de défilement

Savoir si le contenu d'un élément HTML dépasse ses limites peut être crucial pour divers scénarios. Cependant, la vérification du débordement peut s'avérer délicate, en particulier lorsque la propriété de débordement de l'élément est définie sur « visible » et qu'elle ne dispose pas de barres de défilement.

Pour surmonter ce défi, nous pouvons exploiter JavaScript pour déterminer le débordement. Une approche courante consiste à comparer le client [Largeur/Hauteur] de l'élément avec scroll[Largeur/Hauteur]. Cependant, lorsque le débordement est défini sur « visible », ces valeurs deviennent identiques, ce qui empêche une détection précise.

Détection du débordement par programmation

Pour tenir compte de cette particularité, nous pouvons utiliser une routine de détection qui modifie temporairement le style "overflow" de l'élément :

// Determines if the passed element is overflowing its bounds,
// either vertically or horizontally.
// Will temporarily modify the "overflow" style to detect this
// if necessary.
function checkOverflow(el) {
  var curOverflow = el.style.overflow;

  if (!curOverflow || curOverflow === "visible") {
    el.style.overflow = "hidden";
  }

  var isOverflowing = el.clientWidth < el.scrollWidth || el.clientHeight < el.scrollHeight;

  el.style.overflow = curOverflow;

  return isOverflowing;
}

Le checkOverflow function :

1. Stocke la valeur actuelle de la propriété de débordement dans curOverflow.
2. Définit le débordement sur "caché" (sans barres de défilement) s'il n'est pas défini ou s'il est "visible". Cela garantit une détection précise des débordements.
3. Compare les dimensions client de l'élément (clientWidth, clientHeight) avec ses dimensions de défilement (scrollWidth, scrollHeight). Si l'une de ces dimensions est plus petite, cela indique un débordement.
4. Réinitialise la propriété overflow à sa valeur d'origine.
5. Renvoie le résultat booléen isOverflowing.

Cette routine a été testé dans les principaux navigateurs tels que Firefox, Internet Explorer et Chrome, offrant une détection de débordement fiable quels que soient les paramètres de débordement ou la présence de barres 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!