React中触发scroll事件时如何获取垂直滚动列表中心的元素？

核心逻辑很直接：计算滚动容器可视区域的中心垂直坐标，遍历列表项找到自身垂直范围覆盖该坐标的元素即可。

具体实现步骤 #

• 给滚动容器绑定scroll事件，建议搭配requestAnimationFrame做节流，避免滚动时事件触发频率过高造成性能问题。
• 每次事件触发时，计算可视区域中心的垂直位置：如果是DOM层级简单的场景，直接用容器滚动高度加半高计算即可；如果嵌套层级复杂，推荐用getBoundingClientRect()获取实时位置，不用考虑父级定位偏移问题，结果更准确。
• 遍历所有列表项，判断哪个元素的上下边界区间包含了中心坐标，该元素就是当前处于可视区中心的目标元素，比如示例场景中值为8的元素。

可直接复用的代码示例 #

// 获取DOM节点：替换成你自己的容器、列表项选择器即可
const scrollContainer = document.querySelector('.number-list')
const listItems = scrollContainer.querySelectorAll('.list-item')

let isTicking = false
function getCenterItem() {
  // 计算可视区域中心的全局Y坐标
  const containerRect = scrollContainer.getBoundingClientRect()
  const viewCenterY = containerRect.top + containerRect.height / 2

  let centerItem = null
  // 遍历匹配覆盖中心坐标的列表项
  for (const item of listItems) {
    const itemRect = item.getBoundingClientRect()
    if (viewCenterY >= itemRect.top && viewCenterY <= itemRect.bottom) {
      centerItem = item
      break
    }
  }

  // 这里拿到的centerItem就是目标元素
  // 后续可以在这里加高亮、取值等自定义逻辑
  console.log('当前中心元素：', centerItem?.textContent)
  isTicking = false
}

// 绑定滚动事件
scrollContainer.addEventListener('scroll', () => {
  if (!isTicking) {
    window.requestAnimationFrame(getCenterItem)
    isTicking = true
  }
})

// 页面初始化时先执行一次，拿到首屏加载时的中心元素
getCenterItem()

优化提示 #

• 如果列表数据量特别大（上千条），不用每次全量遍历所有列表项，可以记录上一次的中心元素索引，只在索引前后3-5个元素的范围内查找，进一步降低性能消耗。
• 如果需要实现滚动结束后元素自动吸附到中心的效果，拿到中心元素后，计算它和容器中心的偏移差，调用scrollContainer.scrollTo()补一段平滑滚动即可。

内容的提问来源于stack exchange，提问作者J. Doe