desplazamiento de posición del div con "overflow: auto"

Question

Dado este fragmento HTML:

<div id="box" style="overflow:auto; width:200px; height:200px; border:1px solid black;"> 
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> 
11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br> 
21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br> 
</div> 

Usted (por lo general) obtener un cuadro negro con una barra de desplazamiento que contiene los números 1 a 30, cada uno en una nueva fila.

Puede desplazarse hacia arriba y hacia abajo dentro de esa casilla.

Lo que necesito ahora es una posibilidad de averiguar, en qué posición de desplazamiento está la caja. Digamos, cada fila tiene 15 píxeles de alto y se desplaza hacia abajo hasta el número 10, el resultado que me gustaría obtener es el número 150 (15px * 10 líneas).

¿Dónde puedo encontrar este número?

Tengo JavaScript y jQuery en mis manos.

Answer 1

Tiene que usar la propiedad scrollTop.

document.getElementById('box').scrollTop