Menu
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.
926
What you need to do is use the clearInterval() function when it gets to the top, set the scrollbar to the bottom of the page, then reset the interval using setInterval(). To detect when the scrollbar is at the top of the document/element depends on the browser.
Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
Just use overflow: auto . Since your content by default just breaks to the next line when it cannot fit on the current line, a horizontal scrollbar won't be created (unless it's on an element that has word-wrapping disabled). For the vertical bar,it will allow the content to expand up to the height you have specified.
You need to use the scrollTop property.
document.getElementById('box').scrollTop
183
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
