Wie kann ich einen Inhaltsüberlauf von HTML-Elementen ohne Bildlaufleisten programmgesteuert erkennen?

Erkennen eines HTML-Element-Inhaltsüberlaufs ohne Bildlaufleisten

Zu wissen, ob der Inhalt eines HTML-Elements seine Grenzen überschreitet, kann für verschiedene Szenarien von entscheidender Bedeutung sein. Die Überprüfung auf Überlauf kann jedoch schwierig sein, insbesondere wenn die Überlaufeigenschaft des Elements auf „sichtbar“ gesetzt ist und keine Bildlaufleisten vorhanden sind.

Um diese Herausforderung zu meistern, können wir JavaScript nutzen, um den Überlauf zu ermitteln. Ein gängiger Ansatz besteht darin, die Client[Breite/Höhe] des Elements mit der Scroll[Breite/Höhe] zu vergleichen. Wenn der Überlauf jedoch auf „sichtbar“ eingestellt ist, werden diese Werte identisch, was eine genaue Erkennung erschwert.

Überlauf programmgesteuert erkennen

Um diese Besonderheit zu berücksichtigen, können wir Folgendes verwenden eine Erkennungsroutine, die den „Überlauf“-Stil des Elements vorübergehend ändert:

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

Der checkOverflow Funktion:

1. Speichert den aktuellen Überlaufeigenschaftswert in curOverflow.
2. Setzt den Überlauf auf „versteckt“ (ohne Bildlaufleisten), wenn er nicht gesetzt oder „sichtbar“ ist. Dies gewährleistet eine genaue Überlauferkennung.
3. Vergleicht die Client-Abmessungen des Elements (clientWidth, clientHeight) mit seinen Scroll-Abmessungen (scrollWidth, scrollHeight). Wenn eine dieser Dimensionen kleiner ist, deutet dies auf einen Überlauf hin.
4. Setzt die Überlaufeigenschaft auf ihren ursprünglichen Wert zurück.
5. Gibt das boolesche Ergebnis „isOverflowing“ zurück.

Diese Routine wurde in gängigen Browsern wie Firefox, Internet Explorer und Chrome getestet und bietet eine zuverlässige Überlauferkennung, unabhängig von den Überlaufeinstellungen oder dem Vorhandensein von Bildlaufleisten.

Das obige ist der detaillierte Inhalt vonWie kann ich einen Inhaltsüberlauf von HTML-Elementen ohne Bildlaufleisten programmgesteuert erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!