Wie berechnet man den Scroll-Prozentsatz in JavaScript für verschiedene Browser?

Bestimmen des Scroll-Prozentsatzes in JavaScript: Ein browserübergreifender Ansatz

Für die browserübergreifende Kompatibilität bei der Bestimmung des Prozentsatzes des abgeschlossenen vertikalen Scrollens ist eine vielseitige Methode erforderlich. Während Frameworks wie Dojo, jQuery, Prototype und Mootools möglicherweise Lösungen bieten, werden wir uns mit einem nativen JavaScript-Ansatz befassen.

Native JavaScript-Implementierung

Mit den Eigenschaften „scrollTop“ und „scrollHeight“ Wir können den Scroll-Prozentsatz wie folgt berechnen:

<code class="javascript">var h = document.documentElement, 
b = document.body,
st = 'scrollTop',
sh = 'scrollHeight';

var percent = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;</code>

Diese Methode bestimmt effektiv den Scroll-Prozentsatz in allen gängigen Browsern, einschließlich Chrome, Firefox und IE9.

jQuery-Implementierung (ursprüngliche Antwort)

Während die native Lösung effizient ist, stellen wir auch die jQuery-Implementierung aus der ursprünglichen Antwort bereit:

<code class="javascript">$(window).on('scroll', function(){
  var s = $(window).scrollTop(),
      d = $(document).height(),
      c = $(window).height();

  var scrollPercent = (s / (d - c)) * 100;
});</code>

Hinweis: Mögliche Diskrepanz bei mobilen Browsern

Es ist wichtig Beachten Sie, dass die bereitgestellte Methode in modernen mobilen Browsern aufgrund des automatischen Ausblendens der Benutzeroberfläche beim Scrollen möglicherweise keine 100-prozentige Genauigkeit erreicht. Für die meisten Szenarien sollte es jedoch eine zuverlässige Annäherung an den Scroll-Prozentsatz in verschiedenen Browsern liefern.

Das obige ist der detaillierte Inhalt vonWie berechnet man den Scroll-Prozentsatz in JavaScript für verschiedene Browser?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!