如何找到 div 的滚动顶部值

Question

我正在开发响应式网站。当用户看到需要自动播放的视频部分时，我们需要。如果为视频标签设置滚动顶部不起作用。但是我将 scrolltop 设置为 window 它工作正常。

<video id="test">
</video>

<script>
$(document).ready(function () {
   $(window).scroll(function () {
      var js=$('#test-28').scrollTop();
        console.log(js);
      });
   });
</script>

它总是显示 0

任何人都知道如何解决这个问题

Answer 1

您需要使用 offest().top 来获取到达 video 元素的距离。 scrollTop 将得到 window scroll 距离而不是到元素的距离。只需使用这个：

$('#test').offset().top

jsFiddle

   $(window).scroll(function () {
      var scrollTop = $(window).scrollTop();
       var scrollToVid = $('#test').offset().top
        console.log(scrollTop);
        console.log(scrollToVid);

        if ($(window).scrollTop() >= scrollToVid) {
        alert('You reached to the video!');
        }
      });

Answer 2

您也可以使用

document.body.scrollTop + Element.getBoundingClientRect().top

document.body.scrollTop 是文档滚出视口的偏移量
Element.getBoundingClientRect().top 是元素到视口顶部的偏移量。

如何找到 div 的滚动顶部值

How to find scroll top value for div

html

video

scrolltop