滚动可滚动容器div A后，如何获取视口顶部的子div？

你可以通过计算元素的位置关系来实现，scroll/scrollend事件对象本身确实没有直接提供这个属性，以下是两种实用的实现方式：

方法一：滚动结束后遍历子元素计算位置 #

适合子元素数量不多的场景，逻辑直观：

1. 获取容器和所有子元素
2. 在scrollend事件中，计算容器视口顶部的位置
3. 遍历子元素，找到视口顶部落在其范围内的元素

const container = document.querySelector('#containerA');
const childElements = Array.from(container.querySelectorAll('div'));

container.addEventListener('scrollend', () => {
  const containerViewportTop = container.getBoundingClientRect().top;
  let targetChild = null;

  for (const child of childElements) {
    const childRect = child.getBoundingClientRect();
    // 判断容器视口顶部是否落在当前子元素的上下边界之间
    if (childRect.top <= containerViewportTop && childRect.bottom > containerViewportTop) {
      targetChild = child;
      break;
    }
  }

  if (targetChild) {
    console.log('视口顶部对应的子元素:', targetChild);
    // 这里可以添加你的业务逻辑，比如高亮、获取元素内容等
  }
});

方法二：使用IntersectionObserver（高效适合大量子元素） #

当子元素数量很多时，遍历会影响性能，IntersectionObserver是浏览器原生的异步观察API，能高效检测元素与容器视口的交集：

const container = document.querySelector('#containerA');
const childElements = Array.from(container.querySelectorAll('div'));
let currentTopChild = null;

// 创建观察器，指定容器为根元素
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    const containerRect = container.getBoundingClientRect();
    // 仅处理与视口有交集的元素，判断视口顶部是否落在该元素内
    if (entry.isIntersecting) {
      const childTop = entry.boundingClientRect.top;
      if (childTop <= containerRect.top && entry.boundingClientRect.bottom > containerRect.top) {
        currentTopChild = entry.target;
      }
    }
  });
}, {
  root: container,
  rootMargin: '0px',
  threshold: [0, 0.1, 1] // 设置多个阈值，确保触发时机更精准
});

// 批量观察所有子元素
childElements.forEach(child => observer.observe(child));

// 在scrollend事件中获取结果
container.addEventListener('scrollend', () => {
  if (currentTopChild) {
    console.log('视口顶部对应的子元素:', currentTopChild);
  }
});

注意事项 #

• 如果子元素存在margin、border等布局属性，可根据实际情况调整位置判断的逻辑
• 若使用scroll事件而非scrollend，建议添加防抖函数（比如用setTimeout延迟执行计算），避免频繁触发计算影响性能

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