Heim > Web-Frontend > js-Tutorial > Wie kann JavaScript überlaufenden Inhalt in HTML-Elementen erkennen, auch ohne sichtbare Bildlaufleisten?

Wie kann JavaScript überlaufenden Inhalt in HTML-Elementen erkennen, auch ohne sichtbare Bildlaufleisten?

Linda Hamilton
Freigeben: 2024-11-29 19:34:12
Original
603 Leute haben es durchsucht

How Can JavaScript Detect Overflowed Content in HTML Elements, Even Without Visible Scrollbars?

Erkennen übergelaufener Inhalte in HTML-Elementen mithilfe von JavaScript

Bei der Webentwicklung ist es wichtig sicherzustellen, dass der Inhalt der Elemente nicht über ihre Grenzen hinausgeht Grenzen, auch wenn Bildlaufleisten nicht sichtbar sind. Dieses Problem kann beispielsweise bei Elementen mit einer festen Größe und der Einstellung „Überlauf“ auf „sichtbar“ auftreten.

Um festzustellen, ob der Inhalt eines Elements übergelaufen ist, können Sie JavaScript nutzen. Der Standardansatz besteht darin, die Client[Höhe|Breite] des Elements mit seiner Scroll[Höhe|Breite] zu vergleichen. Wenn die Überlaufeigenschaft jedoch auf „sichtbar“ gesetzt ist, sind diese Werte identisch.

Um dieses Problem zu beheben, ist eine ausgefeiltere Erkennungsroutine erforderlich, wie durch die folgende JavaScript-Funktion veranschaulicht:

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;
}
Nach dem Login kopieren

Diese Funktion setzt den „Überlauf“-Stil des Elements vorübergehend auf „versteckt“, um die scrollHeight- und scrollWidth-Werte korrekt zu berechnen. Nach der Berechnung wird der ursprüngliche Überlaufstil wiederhergestellt. Durch den Vergleich dieser Werte mit clientHeight und clientWidth des Elements kann festgestellt werden, ob ein Element entweder vertikal oder horizontal überläuft.

Dieser Ansatz wurde in verschiedenen Browsern getestet, darunter Firefox 3, Firefox 40.0.2 und Internet Explorer 6 und Chrome 0.2.149.30.

Das obige ist der detaillierte Inhalt vonWie kann JavaScript überlaufenden Inhalt in HTML-Elementen erkennen, auch ohne sichtbare Bildlaufleisten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage