JavaScript：ページの上端から任意のタグまでの距離を取得

Question

         すべてのWebページは縦の高さですが、長いページの高さはページ外でオーバーフローする可能性があります。たとえば、Webページには多くの<p>タグがあり、いくつかのタグはowerflovedです。私はどのようにページの上部から<p>タグに距離やスペースを取得するのだろうか。

         ここではいくつかの<p>タグがオーバーフローしている可能性がありますので、この場合は問題にはなりません。

         別の詳細は、多分ページが逆さままでのオーバーフローです。距離のゼロまたはマイナス値であってはなりません。したがって、ページがスクロールまたはオーバーフローすると、距離の値は決して変化しません。距離を取得する方法

         ？

Webページをスクロールする（getBoundingClientRect()オブジェクトを返す私のスクリプトは、私は、オブジェクトの距離を取得したいです）。

Answer 1

あなたが必要と値を取得するためにdocument.getElementByTagName('p')[number].offsetTopを使用することができます。負の値を正の値に変更する別の関数を書くことができます（このような場合が発生した場合）。

var p = document.getElementsByTagName('p'); 
 
for (key in p) { 
 
    var textnode = document.createElement('span'); 
 
    textnode.id = 'scrollVal-' + key; 
 
    textnode.style.color = 'red'; 
 
    textnode.innerHTML = p[key].offsetTop; 
 
    p[key].innerHTML += textnode.outerHTML; 
 
} 
 

 
/*window.addEventListener('scroll', function() { 
 
    for (key in p) { 
 
    if (p[key].children) { 
 
     p[key].children[0].innerHTML = p[key].offsetTop - document.getElementsByTagName('body')[0].scrollTop; 
 
    } 
 
    } 
 
})*/

<p> 
 
    The Blender is a 10,000 pound explosive. It is carried in planes and dropped at heights of 30,000 ft. or higher. It creates such a crater that in 1907 it was ruled unfit for military use. Since then many rebel forces have tried using these to wipe the 
 
    United States of America off the maps for good - but failed horribly. 
 
</p> 
 
<p> 
 
    The Blender is a 10,000 pound explosive. It is carried in planes and dropped at heights of 30,000 ft. or higher. It creates such a crater that in 1907 it was ruled unfit for military use. Since then many rebel forces have tried using these to wipe the 
 
    United States of America off the maps for good - but failed horribly. 
 
</p> 
 
<p> 
 
    The Blender is a 10,000 pound explosive. It is carried in planes and dropped at heights of 30,000 ft. or higher. It creates such a crater that in 1907 it was ruled unfit for military use. Since then many rebel forces have tried using these to wipe the 
 
    United States of America off the maps for good - but failed horribly. 
 
</p> 
 
<p> 
 
    The Blender is a 10,000 pound explosive. It is carried in planes and dropped at heights of 30,000 ft. or higher. It creates such a crater that in 1907 it was ruled unfit for military use. Since then many rebel forces have tried using these to wipe the 
 
    United States of America off the maps for good - but failed horribly. 
 
</p> 
 
<p> 
 
    The Blender is a 10,000 pound explosive. It is carried in planes and dropped at heights of 30,000 ft. or higher. It creates such a crater that in 1907 it was ruled unfit for military use. Since then many rebel forces have tried using these to wipe the 
 
    United States of America off the maps for good - but failed horribly. 
 
</p> 
 
<p> 
 
    The Blender is a 10,000 pound explosive. It is carried in planes and dropped at heights of 30,000 ft. or higher. It creates such a crater that in 1907 it was ruled unfit for military use. Since then many rebel forces have tried using these to wipe the 
 
    United States of America off the maps for good - but failed horribly. 
 
</p> 
 
<p> 
 
    The Blender is a 10,000 pound explosive. It is carried in planes and dropped at heights of 30,000 ft. or higher. It creates such a crater that in 1907 it was ruled unfit for military use. Since then many rebel forces have tried using these to wipe the 
 
    United States of America off the maps for good - but failed horribly. 
 
</p>

Answer 2

あなたはそれが要素のオフセット値からのビューポートの高さを差し引いてviewportまでの距離を算出することが可能だと見ることができる私のバイオリンを確認してください。

https://jsfiddle.net/spbb14j5/1

$(window).on("scroll", function() { 

    var $y = $(".y"), 
     $y2 = $(".y2"), 
     $el = $(".element"), 
     elh = $el.height(), 
     wy = $(window).scrollTop(), 
     wh = $(window).height(), 
     eloffset = $el.offset().top; 

    // distance to top of viewport 
    var distToTop = eloffset - (wy); 

    // distance to bottom of viewport 
    var distToBottom = eloffset - (wy + wh); 

    if (distToTop >= (0 - elh) && distToBottom <= 0) { 
     // Element is partially in viewport 
    } else { 
     // Element is not in viewport 
    } 

});