web-dev-qa-db-fra.com

Faites défiler la position de div avec "débordement: auto"

Compte tenu de cet extrait HTML:

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

Vous obtenez (généralement) une boîte noire avec une barre de défilement qui contient les chiffres de 1 à 30, chacun dans une nouvelle ligne.

Vous pouvez faire défiler vers le haut et vers le bas à l'intérieur de cette boîte.

Ce dont j'ai besoin maintenant, c'est d'une possibilité de savoir à quelle position de défilement la boîte se trouve. Disons simplement que chaque ligne avait une hauteur de 15 pixels et que vous descendez jusqu'au numéro 10, le résultat que j'aimerais obtenir est le nombre 150 (15px * 10 lignes).

Où puis-je trouver ce numéro?

J'ai simplement JavaScript et jQuery entre mes mains.

54
BlaM

Vous devez utiliser la propriété scrollTop .

document.getElementById('box').scrollTop

84
Greg