Comment puis-je détecter le débordement de contenu HTML sans barres de défilement ?

Détection du débordement de contenu dans les éléments HTML sans barres de défilement

De nombreux développeurs sont confrontés au défi de déterminer quand le contenu d'un élément HTML s'étend au-delà de ses limites visibles, surtout si les barres de défilement ne sont pas présentes. Cette tâche devient plus complexe lorsque la propriété de débordement de l'élément est définie sur « visible ».

Solution

La solution réside dans la comparaison des dimensions client de l'élément ([Hauteur|Largeur ]) avec ses dimensions de défilement ([Hauteur|Largeur]). Cependant, lorsque le débordement est visible, ces valeurs seront égales. Pour tenir compte de cela, nous pouvons temporairement modifier le style de débordement en « masqué », vérifier les conditions de débordement, puis restaurer la valeur de débordement d'origine.

Mise en œuvre

Le L'extrait de code ci-dessous fournit une fonction JavaScript, checkOverflow(), qui effectue cette opération. détection :

// Determine 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;
}

Usage

Appelez la fonction checkOverflow() sur l'élément cible pour déterminer s'il a du contenu débordé. La fonction renvoie une valeur booléenne indiquant si un débordement est présent ou non.

Test

Cette routine a été testée avec succès dans Firefox 3, Firefox 40.0.2, Internet Explorer 6 et Chrome 0.2.149.30.

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!