web-dev-qa-db-ja.com

「overflow:auto」でdivのスクロール位置

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

(通常)スクロールバーに1〜30の数字がそれぞれ新しい行にあるブラックボックスが表示されます。

そのボックス内を上下にスクロールできます。

今必要なのは、ボックスがどのスクロール位置にあるかを見つける可能性です。たとえば、各行の高さが15ピクセルで、10までスクロールダウンすると、結果は150(15px * 10行)になります。

この番号はどこにありますか?

私の手元にはプレーンなJavaScriptとjQueryがあります。

54
BlaM

scrollTop プロパティを使用する必要があります。

document.getElementById('box').scrollTop

84
Greg