Heim >Web-Frontend >js-Tutorial >Wie bestimme ich den Prozentsatz des vertikalen Scrollens browserübergreifend in JavaScript?

Wie bestimme ich den Prozentsatz des vertikalen Scrollens browserübergreifend in JavaScript?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-10-18 17:15:29335Durchsuche

How Do I Determine the Vertical Scroll Percentage Cross-Browser in JavaScript?

Browserübergreifende Methode zur Bestimmung des vertikalen Scroll-Prozentsatzes in JavaScript

In der Webentwicklung ist es oft notwendig, den Prozentsatz des vertikalen Scrollens zu bestimmen Bildlaufleiste, durch die sich ein Benutzer bewegt hat. Die folgende Methode bietet eine browserübergreifende Lösung für dieses Problem.

Funktionsbasierter Ansatz

Unter Verwendung von HTML-Elementen und Dokumentobjekten können wir den Scroll-Prozentsatz wie folgt berechnen :

<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-Alternative

Für diejenigen, die jQuery bevorzugen, kann ein Event-Listener verwendet werden:

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

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

Einschränkungen

Beachten Sie, dass diese Methode aufgrund der Funktion zum automatischen Ausblenden beim Scrollen möglicherweise nicht 100 % genau in modernen mobilen Browsern angezeigt wird.

Das obige ist der detaillierte Inhalt vonWie bestimme ich den Prozentsatz des vertikalen Scrollens browserübergreifend in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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