javascript - body の .scrollTop 値を表示する div を作成するにはどうすればよいですか?

Question

私のウェブページには、次の div があります。

<div style="position:fixed; z-index:100;"></div>

上記の div 内の本文の現在の .scrollTop 値を返すスクリプトを作成しようとしています (たとえば、本文を 100 ピクセル下にスクロールした場合、div を単に "100" と読みたい)、しかし、私は .scrollTop を把握するのに苦労しており、どこから始めればよいのかさえわかりません。何か助けはありますか？

Answer 1

値を継続的に表示するには、タイミング ループが必要です。

<div id="a">0</div>

JS:

var showScroll = setInterval(function() {
     document.getElementById('a').innerHTML = (document.body.scrollTop)                                 
},50)

Answer 2

ここではjQueryを使用していると仮定しています。次のように、リスナをスクロール イベントにバインドして、div のコンテンツを の結果に置き換えることができますscrollTop()。

var div = $("div"); //Replace this selector with an ID for your div
$(document).scroll(function() {
    div.html($(window).scrollTop());
});