Heim > Web-Frontend > js-Tutorial > Wie kann ich die Dokumenthöhe in JavaScript zuverlässig bestimmen?

Wie kann ich die Dokumenthöhe in JavaScript zuverlässig bestimmen?

Barbara Streisand
Freigeben: 2024-12-02 02:41:10
Original
752 Leute haben es durchsucht

How Can I Reliably Determine Document Height in JavaScript?

Bestimmen der Dokumenthöhe mit JavaScript

Das Ermitteln der korrekten Höhe eines Dokuments in JavaScript kann aufgrund von Browserkompatibilitätsproblemen eine Herausforderung sein. Während alle Browser Eigenschaften wie clientHight und scrollHeight bereitstellen, variieren ihre Berechnungen.

Beispiel für Fandango und Paperback Swap

Auf Websites wie Fandango und Paperback Swap werden traditionelle Methoden wie $ (document).height(), document.height und document.body.scrollHeight schlagen fehl oder werden ungenau zurückgegeben Werte.

Best Practice: Berechnung der maximalen Höhe

Um dieses Problem zu beheben, wurde eine Best Practice entwickelt: Bestimmen Sie die maximale Höhe aus allen verfügbaren Quellen. Das Enthält:

  • document.body.scrollHeight
  • document.body.offsetHeight
  • document.documentElement.cli entHeight
  • document.documentElement.scrollHeight
  • document.documentElement.offsetHeight

Code Implementierung

Das folgende Codebeispiel implementiert diesen Ansatz:

var body = document.body,
    html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );
Nach dem Login kopieren

Überlegungen

  • Testen der Dokumenthöhe, bevor das Dokument bereit ist Das Ergebnis ist eine Null.
  • Dynamischer Inhalt oder eine Größenänderung des Fensters können erforderlich sein Erneutes Testen.
  • Verwenden Sie Onload oder ein Document-Ready-Ereignis für erste Berechnungen. andernfalls bei Bedarf testen.

Das obige ist der detaillierte Inhalt vonWie kann ich die Dokumenthöhe in JavaScript zuverlässig bestimmen?. 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