javascript - 数组中的 div 距窗口顶部的距离

Question

我试图获取数组中 div 与窗口顶部的距离，但收到错误“player.offset 不是函数”。我哪里出错了，任何帮助将不胜感激。

const players = Array.from(document.querySelectorAll('.js-player'));
        
$(window).on('scroll', function () {
    let scrollTop     = $(window).scrollTop();
    console.log(scrollTop)
    players.forEach(function(player) {
        let playerOffset = player.offset().top,
            distance      = (playerOffset - scrollTop);
        console.log(playerOffset, distance)
    })
});

.js-player {
  height: 100px;
  width: 100px;
  margin: 100px;
  background-color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="js-player"></div>
<div class="js-player"></div>
<div class="js-player"></div>

Answer 1

.offset() 是一个 jQuery 函数，请参阅 http://api.jquery.com/offset/ .

您应该将 player 变量包装到 jQuery 中并调用 .offset().top，如下所示:

let playerOffset = $(player).offset().top;

或者使用原生 HTMLElement offsetTop 值，请参阅此处 https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop

let playerOffset = player.offsetTop;