Wie kann der vertikale Scroll-Prozentsatz in JavaScript in verschiedenen Browsern bestimmt werden?

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

Die Fähigkeit, den vertikalen Scroll-Prozentsatz des Benutzers zu bestimmen, ist für die Implementierung des Scrollens von entscheidender Bedeutung -abhängige Funktionen in Webanwendungen. Dieser umfassende Leitfaden bietet eine browserübergreifende Lösung zur genauen Berechnung des gescrollten Prozentsatzes.

Nicht-Framework-Lösung

Für Browser wie Chrome, Firefox und IE9 gilt die Die folgende Formel kann zur Berechnung des Scroll-Prozentsatzes verwendet werden:

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

wobei:

• h das Stammelement des Dokuments ist
• b das Hauptelement des Dokuments ist
• st ist entweder „scrollTop“ (für WebKit-Browser) oder „scrollTop“ (für andere Browser)
• sh ist entweder „scrollHeight“ (für WebKit-Browser) oder „scrollHeight“ (für andere Browser). )

Funktionsimplementierung

Sie können diese Formel zur Wiederverwendbarkeit in eine Funktion kapseln:

<code class="javascript">function getScrollPercent() {
    var h = document.documentElement, 
        b = document.body,
        st = 'scrollTop',
        sh = 'scrollHeight';
    return (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
}</code>

jQuery-Lösung

Wenn Sie jQuery verwenden, bietet das folgende Code-Snippet eine browserübergreifende Lösung zur Berechnung des Scroll-Prozentsatzes:

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

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

Hinweis

• Bei modernen mobilen Browsern erreicht die Lösung möglicherweise nicht 100 %, da die Benutzeroberfläche beim Scrollen automatisch ausgeblendet wird.
• Die jQuery-Lösung basiert auf der ursprünglich bereitgestellten Antwort.

Das obige ist der detaillierte Inhalt vonWie kann der vertikale Scroll-Prozentsatz in JavaScript in verschiedenen Browsern bestimmt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!