使用Intersection Observer API检测可滚动div顶部元素实现周数同步

核心实现步骤 #

• 给可滚动父容器设置固定高度与overflow-y: auto属性，所有周数模块子元素添加统一类名（如week-item），并通过data-week自定义属性绑定对应周数值。
• 配置Intersection Observer实例参数：指定root为目标可滚动div，rootMargin设为-1px 0px 0px 0px触发顶部接触判定，threshold设为0即可触发回调。
• 编写观测回调逻辑：遍历回调返回的entries数组，筛选isIntersecting为true的元素，读取其data-week属性值直接更新头部展示的周数。
• 初始化时遍历所有周数模块元素，调用观测实例的observe()方法绑定观测；组件/页面销毁时调用disconnect()方法销毁实例，避免内存泄漏。

参考代码 #

// 定义DOM元素
const scrollContainer = document.querySelector('#scroll-container')
const headerWeekLabel = document.querySelector('#header-week-label')

// 初始化观测实例
const weekObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 更新头部周数
      headerWeekLabel.textContent = entry.target.dataset.week
    }
  })
}, {
  root: scrollContainer,
  rootMargin: '-1px 0px 0px 0px',
  threshold: 0
})

// 绑定所有周数模块
document.querySelectorAll('.week-item').forEach(weekEl => {
  weekObserver.observe(weekEl)
})

// 销毁观测（组件卸载时执行）
// weekObserver.disconnect()

兼容处理说明 #

• 若周数模块为动态渲染，需在新模块插入DOM后，手动调用observe()方法将新元素加入观测队列。
• 若存在多个元素同时触发观测的边界场景，可给周数模块添加序号属性，取序号最小的元素对应的周数作为顶部展示值。

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