如何在滚动位置查找类元素？判断滚动窗口中可见/不可见div

完全可以实现你的需求，以下是原生JavaScript和jQuery的具体实现方案：

一、获取指定滚动位置处的元素 #

不管是原生JS还是jQuery，都可以借助浏览器原生API来实现类似"atScrollPosition"的定位效果：

原生JavaScript实现 #

使用document.elementFromPoint(x, y)可以直接获取页面指定坐标点最顶层的元素，结合滚动偏移计算目标位置：

// 示例：获取垂直滚动位置X处的元素（水平取视口中间）
const targetScrollY = X; // 替换为你的目标滚动Y值
const viewportMidX = window.scrollX + window.innerWidth / 2;
const targetElement = document.elementFromPoint(viewportMidX, targetScrollY);

// 若需筛选特定类的div，可进一步判断
const targetClassDiv = targetElement?.matches('div.class') 
  ? targetElement 
  : targetElement?.closest('div.class');

如果要获取该位置所有堆叠的元素，改用document.elementsFromPoint(x, y)再筛选即可。

jQuery实现 #

jQuery没有原生的位置选择器，但可以封装原生方法实现：

function getDivAtScrollY(targetY) {
  const midX = $(window).scrollLeft() + $(window).width() / 2;
  const nativeEl = document.elementFromPoint(midX, targetY);
  return $(nativeEl).is('div.class') ? $(nativeEl) : $(nativeEl).closest('div.class');
}

// 使用示例
const $targetDiv = getDivAtScrollY(X); // X为目标滚动Y值

二、找出滚动窗口中不可见的div和第一个可见的div #

原生JavaScript基础方案 #

遍历目标div集合，通过getBoundingClientRect()判断元素与视口的位置关系：

const allClassDivs = document.querySelectorAll('div.class');
const invisibleDivs = [];
const visibleDivs = [];

allClassDivs.forEach(div => {
  const rect = div.getBoundingClientRect();
  // 判断完全不可见：元素底部在视口上方 或 顶部在视口下方
  const isTotallyInvisible = rect.bottom < 0 || rect.top > window.innerHeight;
  // 判断至少部分可见
  const isVisible = rect.top < window.innerHeight && rect.bottom > 0;

  if (isTotallyInvisible) invisibleDivs.push(div);
  if (isVisible) visibleDivs.push(div);
});

const firstVisibleDiv = visibleDivs[0];
console.log('不可见的div:', invisibleDivs);
console.log('第一个可见的div:', firstVisibleDiv);

jQuery基础方案 #

用jQuery遍历结合原生位置判断：

const $allDivs = $('div.class');
const $invisibleDivs = $();
const $visibleDivs = $();

$allDivs.each(function() {
  const $div = $(this);
  const rect = $div[0].getBoundingClientRect();
  const isTotallyInvisible = rect.bottom < 0 || rect.top > $(window).height();
  const isVisible = rect.top < $(window).height() && rect.bottom > 0;

  if (isTotallyInvisible) $invisibleDivs.add($div);
  if (isVisible) $visibleDivs.add($div);
});

const $firstVisible = $visibleDivs.first();
console.log('不可见的div:', $invisibleDivs);
console.log('第一个可见的div:', $firstVisible);

高性能优化方案：Intersection Observer API #

如果需要实时监听滚动时的可见性变化，推荐使用Intersection Observer，它比遍历判断性能更优，适合大量元素的场景：

// 初始化观察者
const visibilityObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 元素变为可见，记录第一个可见元素
      if (!window.firstVisibleDiv) {
        window.firstVisibleDiv = entry.target;
      }
      console.log('变为可见:', entry.target);
    } else {
      console.log('变为不可见:', entry.target);
    }
  });
}, { root: window });

// 监听所有目标div
document.querySelectorAll('div.class').forEach(div => {
  visibilityObserver.observe(div);
});

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