jquery - offset().top を変更する必要があります

Question

私はjQueryが初めてで、スクロールで何かをしようとしています。私の調査を通じて、これに使用するツールとして scrollTop() と offset() に出会いました。ボタンを押すと、div の offset().top の値が警告されるテストを実行していました。少しスクロールしてボタンを押すと、その値が変わります。スクロールしてもdivからドキュメントの上部までの距離は変わらないため、この値は同じままである必要があるという印象を受けました。誰かがなぜこれが起こっているのか説明できますか?

Answer 1

測定している要素がスクロール可能なコンテナー内にある場合、topコンテナーのスクロールが考慮されるため、はい、変更できます。topドキュメントの上部から要素までの視覚的な距離になります。要素にスクロールされるコンテナーがあり、そのスクロールを変更すると、その距離が変わります。

検討：

<div style="height: 300px; overflow: scroll">
  <p>x</p>
  <!-- lots and lots more of those -->
  <p id="target">click me</p>
</div>

含まれている をスクロールするdivと、ドキュメントの上部から上部までの視覚的な距離が#target変化します。

実例| ライブソース

Answer 2

Element.offset().top;要素がドキュメントの上部からのピクセル数であるため、これを行う場合

alert( $('#element').offset().top );

$('#element').css('margin-top', '50px');

alert( $('#element').offset().top );

値の変化が見られるはずです

はスクロールscrollTop();可能な要素用であるため、スクローラーがどれだけ下にあるかを検出します。これは、htmlまたはbody要素がない場合にのみ機能しますoverflow:scroll

それで

alert( $('#element').scrollTop() );
// Scroll the Element within 5 seconds

window.setTimeout(function(){ 
    alert( $('#element').scrollTop() );
}, 5000);

長い話を短くすると、あなたは言うことができます

offset要素が移動scrollTopすると変更され、要素がスクロールされると変更されます