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.

Answers:

Answer

You need to use the scrollTop property.

document.getElementById('box').scrollTop

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.