React中动态获取Div位置，解决横向滚动后悬浮层定位异常

问题出在你用getBoundingClientRect()获取的是元素相对于浏览器视口的位置，而横向滚动容器滚动后，卡片的视口位置和容器内的实际偏移不匹配，导致绝对定位的悬浮层错位。以下是具体修复方案：

核心修复思路 #

• 给每个卡片的父容器添加relative定位，让悬浮层的绝对定位基于该父容器（而非视口）。
• 移除手动计算视口位置的逻辑，利用CSS绝对定位的特性实现悬浮层的正确定位。
• 调整鼠标事件的绑定位置，避免悬浮层遮挡后误触发mouseleave。

修改后的完整代码 #

import "../../App.css";
import { useState } from "react";

function List() {
  const cards = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
  return (
    <div>
      <h2 className="text-white pl-[4%] text-[1.3vw] font-semibold">
        List Heading
      </h2>
      <div className="flex space-x-2 pt-[1%] pl-[4%] overflow-x-scroll overflow-y-hidden">
        {cards.map(num => <Card key={num} num={num} />)}
      </div>
    </div>
  );
}

function Card(props) {
  const [isHovered, setIsHovered] = useState(false);

  return (
    {/* 给父容器添加relative，作为悬浮层的定位基准 */}
    <div className="flex justify-center items-center relative">
      {/* 卡片容器，绑定鼠标进出事件 */}
      <div
        className="bg-yellow-300 h-[8.6vw] w-[15vw] flex justify-center items-center"
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >
        <p>{props.num}</p>
      </div>

      {/* 悬浮详情层：利用绝对定位相对于父容器居中，z-index确保在上方 */}
      {isHovered && (
        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 
                        h-[18vw] w-[22vw] bg-black/50 z-10 flex justify-center items-center">
          <p className="text-white text-xl">详情内容 {props.num}</p>
        </div>
      )}
    </div>
  );
}

export default List;

关键改动说明 #

1. 定位基准设置：给卡片外层的div添加relative类，这样悬浮层的absolute定位会以这个父容器为参考，不再受容器滚动的影响。
2. 悬浮层定位：用left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2实现悬浮层相对于父卡片居中，无需手动计算位置，适配任何滚动状态。
3. 事件绑定优化：把onMouseEnter和onMouseLeave绑定在原始卡片上，同时用状态控制悬浮层的显示，避免悬浮层遮挡后误触发离开事件。
4. 列表渲染优化：用map循环生成卡片，代替手动重复书写，更符合React最佳实践。

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