0

quiero hacer lo siguiente:

Calcular el tamaño del scrollbar al 100% y lanzarlo al final, para que conforme el usuario vaya moviendo el scroll hacia arriba, el número de metros vaya incrementando pero en decimales:

ej:

Metros: 0, 0.01, 0.02, hasta llegar a 13

jQuery(document).ready(function() {

    jQuery("#scroll").scroll(function() {

        var scrollTop = jQuery(this).scrollTop();
        var bottom = $("#scroll").height();

    metros = bottom/13;
    metros=Number.parseFloat(metros).toFixed(2);

        jQuery('.metros p').each(function() {

            var porcentajeScroll = (13 * 100) / bottom;
            var porcentajeTotalScroll = Math.round(porcentajeScroll);

            for (int i = 1; i <= porcentajeTotalScroll; i++) {
                var porcentajeMetros = (13 / 13) * 100;
                var porcentajeTotalMetros = Math.round(porcentajeMetros);
                metros = porcentajeTotalMetros;
            }
            var text = jQuery(this).text();
            var texto = jQuery('.metros p').text();
            jQuery(this).text(text.replace(texto, .metros));

        });
    });
});
#scroll::-webkit-scrollbar-track {border: 1px solid #e3e3e3;padding: 2px 0;background-color: #e3e3e3;border-radius:6px 6px 0 0;}
  #scroll::-webkit-scrollbar {width: 10px;}
  #scroll::-webkit-scrollbar-thumb {border-radius: 10px;box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color:#587e42;border: 1px solid #587e42;}   
  #scroll{position:relative;width:10px;height:100vh !important;z-index: 2;overflow:auto;position: absolute;top: 0;right: 3em;}
  .mmetros p{font-size: 5em;}
 
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <div id="scroll">
          <div style="height:1190px;"></div>
        </div>
      
        <div class="metros">
          <p>2</p>
        </div>

1 respuesta 1

1

Compañero, creo que logro entender lo que deseas, puedes probarlo de esta manera.

$(function() {
        $.fn.calc_height();
        $(window).bind('scroll', function() {
            $.fn.calc_height();
        });
    });

    $.fn.calc_height = function() {
        var window_scroll_top = $(window).scrollTop();
        var window_scroll_top_cm = window_scroll_top * 0.026458333;
        $('.currentheight').html( window_scroll_top_cm.toFixed(2) + ' cm' );
    };
.currentheight {
    position: fixed;
    min-height: 120px;
    width: 252px;
    text-align: center;
    word-wrap: break-word;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
</head>

<body>
<div id="scroll">
  <div style="height:1190px;">
    <div class="currentheight">Datos</div>
  </div>
</div>
</body>
</html>

2
  • Gracias por el apoyo, y ¿Cómo sería que el scroll comienze desde abajo y no por arriba?. Saludos...
    – Anselmo
    Commented el 31 ene. 2020 a las 17:46
  • Lo tengo, solo invertí el div: #scroll{transform:rotate(180deg);}
    – Anselmo
    Commented el 31 ene. 2020 a las 21:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.