获取数组中div距窗口顶部距离时报错‘player.offset is not a function’求排查

你之所以会遇到player.offset is not a function的错误，核心原因是原生DOM元素和jQuery对象的方法混用：

• 你用Array.from(document.querySelectorAll('.js-player'))获取到的是原生DOM元素数组，这些是浏览器原生的对象，并没有jQuery提供的offset()方法；
• 而offset()是jQuery封装的专属方法，只能在jQuery对象上调用。

办法1：把原生DOM元素转为jQuery对象 #

在遍历的时候，把每个原生DOM元素用$()包裹，转换成jQuery对象后再调用offset()：

const players = Array.from(document.querySelectorAll('.js-player'));
$(window).on('scroll', function () {
  let scrollTop = $(window).scrollTop();
  console.log(scrollTop)
  players.forEach(function(player) {
    // 把原生DOM转成jQuery对象
    let playerOffset = $(player).offset().top,
        distance = (playerOffset - scrollTop);
    console.log(distance);
  });
});

办法2：全程用jQuery获取元素集合 #

如果你本来就打算用jQuery来操作，直接用jQuery选择器获取元素，得到的就是jQuery对象集合，直接调用offset()即可：

// 直接用jQuery选择器获取元素
const players = $('.js-player');
$(window).on('scroll', function () {
  let scrollTop = $(window).scrollTop();
  console.log(scrollTop)
  // 用jQuery的each方法遍历集合
  players.each(function() {
    let playerOffset = $(this).offset().top,
        distance = (playerOffset - scrollTop);
    console.log(distance);
  });
});

办法3：用原生JS替代jQuery方法（无需依赖jQuery） #

如果不想用jQuery，可以用原生JS的getBoundingClientRect()方法来获取元素位置：

const players = Array.from(document.querySelectorAll('.js-player'));
window.addEventListener('scroll', function () {
  const scrollTop = window.scrollY;
  console.log(scrollTop)
  players.forEach(function(player) {
    // 获取元素相对于视口的位置，再加上滚动距离得到文档顶部的距离
    const rect = player.getBoundingClientRect();
    const playerOffset = rect.top + scrollTop;
    const distance = playerOffset - scrollTop;
    // 其实这里distance等价于rect.top，因为playerOffset - scrollTop = (rect.top + scrollTop) - scrollTop = rect.top
    console.log(distance);
  });
});

内容的提问来源于stack exchange，提问作者cal