如何检测使用scroll-snap-type实现类YouTube Shorts时的当前可见元素

方法一：使用Intersection Observer API（推荐） #

这种方法性能更优，无需频繁监听scroll事件，适合大量内容的场景。

1. 给每个滚动快照项添加统一类名，比如.snap-item
2. 初始化Intersection Observer，设置合适的交叉阈值（比如0.8，确保项大部分进入视口时触发）
3. 监听每个项的交叉状态，当满足阈值时标记为当前活跃项

<!-- HTML结构 -->
<div class="snap-container">
  <div class="snap-item">内容1</div>
  <div class="snap-item">内容2</div>
  <div class="snap-item">内容3</div>
</div>

/* CSS scroll-snap设置 */
.snap-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.snap-item {
  height: 100vh;
  scroll-snap-align: start;
}

// JS 实现检测
const snapItems = document.querySelectorAll('.snap-item');
let currentActiveItem = null;

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting && entry.intersectionRatio >= 0.8) {
      // 移除之前活跃项的标记
      if (currentActiveItem) {
        currentActiveItem.classList.remove('active');
      }
      // 标记当前活跃项
      currentActiveItem = entry.target;
      currentActiveItem.classList.add('active');
      // 这里可以执行你需要的逻辑，比如获取当前项的ID或内容
      console.log('当前显示项:', currentActiveItem.textContent);
    }
  });
}, {
  threshold: 0.8,
  root: document.querySelector('.snap-container')
});

// 开始监听所有项
snapItems.forEach(item => observer.observe(item));

方法二：监听scroll事件结合getBoundingClientRect #

如果需要更精细的控制，也可以通过scroll事件计算每个项的位置：

const snapContainer = document.querySelector('.snap-container');
const snapItems = document.querySelectorAll('.snap-item');

snapContainer.addEventListener('scroll', () => {
  let currentItem = null;
  const viewportHeight = snapContainer.clientHeight;

  snapItems.forEach(item => {
    const rect = item.getBoundingClientRect();
    // 计算项与视口的重叠高度
    const overlap = Math.max(0, Math.min(rect.bottom, viewportHeight) - Math.max(rect.top, 0));
    // 取重叠高度最大的项作为当前显示项
    if (!currentItem || overlap > currentItem.overlap) {
      currentItem = { element: item, overlap };
    }
  });

  if (currentItem) {
    // 这里处理当前项逻辑
    console.log('当前显示项:', currentItem.element.textContent);
  }
}, { passive: true });

注意事项 #

• 确保scroll-snap-align设置正确（通常用start或center），保证滑动后项能完全对齐视口
• Intersection Observer的阈值可以根据需求调整，比如设为1.0时要求项完全进入视口才触发
• scroll事件监听建议添加passive: true提升滚动性能

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