如何根据精确水平滚动位置找到对应的DOM元素

不用靠计算元素宽度来找对应DOM，直接拿元素的实际占位范围来匹配才靠谱，具体做法如下：

核心逻辑 #

利用DOM元素的getBoundingClientRect()方法，获取每个元素在页面上的真实左右坐标，再结合滚动容器的偏移量，算出元素在容器滚动坐标系里的实际范围，最后对比目标位置就能找到对应元素。

具体步骤 #

• 先拿到滚动容器的scrollLeft值（水平滚动的偏移量）
• 遍历所有要匹配的元素，对每个元素调用getBoundingClientRect()，算出它在容器内的左右边界：
  • 元素左边界 = 元素视口左坐标 - 容器视口左坐标 + 容器滚动偏移量
  • 元素右边界 = 元素视口右坐标 - 容器视口左坐标 + 容器滚动偏移量
• 对比目标位置（比如25px），找到第一个满足「左边界 ≤ 目标位置 < 右边界」的元素，就是你要的DOM。

原生JS代码示例 #

function getElementByScrollPos(container, targetPos) {
  const items = container.querySelectorAll('.scroll-item'); // 替换成你的元素选择器
  const containerRect = container.getBoundingClientRect();
  
  for (const item of items) {
    const rect = item.getBoundingClientRect();
    const itemLeft = rect.left - containerRect.left + container.scrollLeft;
    const itemRight = rect.right - containerRect.left + container.scrollLeft;
    
    if (targetPos >= itemLeft && targetPos < itemRight) {
      return item;
    }
  }
  return null; // 没找到的情况
}

// 调用示例
const scrollContainer = document.getElementById('scroll-container');
const targetElement = getElementByScrollPos(scrollContainer, 25);
console.log(targetElement); // 返回对应#2元素

Vue适配写法 #

把逻辑封装成组件方法就行，用ref获取容器元素：

<template>
  <div ref="scrollBox" class="scroll-container">
    <div class="scroll-item" v-for="item in list" :key="item.id">{{ item.content }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [/* 你的数据列表 */]
    };
  },
  methods: {
    getTargetElement(targetPos) {
      const container = this.$refs.scrollBox;
      if (!container) return null;
      const items = container.querySelectorAll('.scroll-item');
      const containerRect = container.getBoundingClientRect();
      
      for (const item of items) {
        const rect = item.getBoundingClientRect();
        const itemLeft = rect.left - containerRect.left + container.scrollLeft;
        const itemRight = rect.right - containerRect.left + container.scrollLeft;
        
        if (targetPos >= itemLeft && targetPos < itemRight) {
          return item;
        }
      }
      return null;
    }
  },
  mounted() {
    // 找25px位置的元素
    const el = this.getTargetElement(25);
    console.log(el);
  }
};
</script>

方案优势 #

• 不管元素宽度怎么变，getBoundingClientRect()都会返回真实的布局位置，完全适配不均宽的场景。
• 不用手动维护宽度数据，动态内容（比如元素加载、样式变化）也能准确匹配，省心不少。

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