Método entre navegadores para determinar el porcentaje de desplazamiento vertical en Javascript

Resuelto majelbstoat asked hace 14 años • 14 respuestas

¿Cómo puedo saber qué porcentaje de la barra de desplazamiento vertical ha recorrido un usuario en un punto determinado?

Es bastante fácil atrapar el onscrollevento para que se active cuando el usuario se desplaza hacia abajo en la página, pero ¿cómo puedo saber dentro de ese evento hasta qué punto se ha desplazado? En este caso, el porcentaje es particularmente importante. No estoy particularmente preocupado por una solución para IE6.

¿Alguno de los marcos principales (Dojo, jQuery, Prototype, Mootools) expone esto de una manera simple y compatible con todos los navegadores?

majelbstoat avatar Mar 05 '10 20:03 majelbstoat
Aceptado

Octubre de 2016: solucionado. Faltaban paréntesis en la demostración de jsbin en la respuesta. Ups.

Chrome, Firefox, IE9+. Demostración en vivo en jsbin

var h = document.documentElement, 
    b = document.body,
    st = 'scrollTop',
    sh = 'scrollHeight';

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

Como función:

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;
}

Si lo prefieres jQuery(respuesta original):

$(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);
})
html{ height:100%; }
body{ height:300%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Expandir fragmento

Phil Ricketts avatar Nov 06 '2011 16:11 Phil Ricketts

Creo que encontré una buena solución que no depende de ninguna biblioteca:

/**
 * Get current browser viewpane heigtht
 */
function _get_window_height() {
    return window.innerHeight || 
           document.documentElement.clientHeight ||
           document.body.clientHeight || 0;
}

/**
 * Get current absolute window scroll position
 */
function _get_window_Yscroll() {
    return window.pageYOffset || 
           document.body.scrollTop ||
           document.documentElement.scrollTop || 0;
}

/**
 * Get current absolute document height
 */
function _get_doc_height() {
    return Math.max(
        document.body.scrollHeight || 0, 
        document.documentElement.scrollHeight || 0,
        document.body.offsetHeight || 0, 
        document.documentElement.offsetHeight || 0,
        document.body.clientHeight || 0, 
        document.documentElement.clientHeight || 0
    );
}


/**
 * Get current vertical scroll percentage
 */
function _get_scroll_percentage() {
    return (
        (_get_window_Yscroll() + _get_window_height()) / _get_doc_height()
    ) * 100;
}
Eduardo avatar Feb 19 '2012 12:02 Eduardo