Given this HTML snippet lt div id box style overflow auto width 200px height 200px border 1px solid black gt 1 lt br gt 2 lt br gt 3 lt br gt 4 lt br gt 5 lt br gt 6 lt br gt 7 lt br gt 8 lt br gt 9 lt br gt 10 lt br gt 11 lt br gt 12 lt br gt 13 lt br gt 14 lt br gt 15 lt br gt 16 lt br gt 17 lt br gt 18 lt br gt 19 lt br gt 20 lt br gt 21 lt br gt 22 lt br gt 23 lt br gt 24 lt br gt 25 lt br gt 26 lt br gt 27 lt br gt 28 lt br gt 29 lt br gt 30 lt br gt lt div gt 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

[javascript] Scroll Position of div with "overflow: auto"

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.

This question is related to javascript html css scroll-position