Scroll Position of div with “overflow: auto”

Question

Given this HTML snippet:

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

You (usually) get a black box with a scrollbar that contains the numbers 1 to 30, each in a new row.

You can scroll up and down inside of that box.

What I need now is a possibility to find out, at which scroll position the box is. Let's just say, each row was 15 pixel high and you scroll down to the number 10, the result I'd like to get is the number 150 (15px * 10 lines).

Where do I find this number?

I have plain JavaScript and jQuery at my hands.

Answer 1

You need to use the scrollTop property.

document.getElementById('box').scrollTop