Question

我试图从窗口顶部获取数组中div的距离但是收到错误＆＃34; player.offset不是函数＆＃34;。哪里出错了，我们将非常感谢任何帮助。

＆＃13;

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)
    })
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

player是一个js元素。 offset()是一个jquery函数。因此，您需要一个jquery对象：

 $(player).offset().top

然而，从长远来看，你应该使用纯粹的js或纯粹的jquery，但不要混合它们，这只会产生混淆（就像在这种情况下）。

Answer 2

.offset（）是一个jQuery函数，请参阅http://api.jquery.com/offset/。

你应该将播放器变量包装到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;

Answer 3

你必须在DOM元素上使用偏移量，这样的东西应该起作用：

$('.js-player').offset().top - $('.js-player').offset().top

数组中div与窗口顶部的距离

3 个答案: