Scroll Position of div with "overflow: auto"

BlaM picture BlaM · Dec 5, 2008 · Viewed 112k times · Source

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

Greg picture Greg · Dec 5, 2008

You need to use the scrollTop property.

document.getElementById('box').scrollTop