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>