Comment JavaScript peut-il détecter le débordement du contenu d'un élément HTML lorsque « débordement : visible » ?

Comment détecter le débordement de contenu d'un élément en HTML avec JavaScript

Vous avez rencontré un élément HTML qui présente un contenu débordant, malgré sa propriété de débordement défini sur "visible" et manquant de barres de défilement. Existe-t-il un moyen de déterminer si ce débordement existe à l'aide de JavaScript ?

Résoudre le problème

En général, on comparerait clientHeight et scrollHeight de l'élément (ou clientWidth et scrollWidth) pour détecter un débordement. Cependant, un débordement ayant le paramètre « visible » présente un défi.

Solution : modification temporaire de la propriété de débordement

Pour tenir compte de cela, une routine de détection est nécessaire. La fonction suivante modifie temporairement le style « débordement » en « masqué » et vérifie le débordement :

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

Navigateurs pris en charge

Cette fonction a été testée sur 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!