React：点击生成的Div滚动后无法跟随视口定位问题求助

问题原因 #

你用event.clientX/clientY获取的是相对于当前视口的坐标，但如果#guess-div的定位是默认的absolute（或未设置定位），它会相对于最近的定位祖先元素（无定位祖先时则相对于文档根节点）。页面滚动后，文档根节点的顶部与视口顶部产生偏移，导致div位置偏离鼠标点击的视口位置。

解决方案 #

1. 给div添加fixed定位

fixed定位的元素始终相对于浏览器视口定位，不受页面滚动影响，刚好匹配clientX/clientY的视口坐标特性。

2. 修正组件参数传递

你的Guess组件参数解构存在问题，需直接从props中获取location：

const [position, setPosition] = useState([0,0])
const [guessed, setGuessed] = useState(false) // 假设你定义了这个状态

const renderGuess = (event) =>{ 
  if(guessed){
    setPosition([0,0]);
    setGuessed(false);
  }else{
    setPosition([event.clientX, event.clientY]);
    setGuessed(true);
  }
}

// 修正参数解构方式
function Guess({ location }){
    console.log(location)
    return(
        <div 
          id="guess-div" 
          style={{
            position: 'fixed', // 关键：设置fixed定位
            top: `${location[1]}px`, 
            left: `${location[0]}px`,
            // 可添加基础样式确保元素可见
            width: '40px',
            height: '40px',
            backgroundColor: '#333',
            borderRadius: '4px'
          }}
        />
    )
}

// 渲染组件时传递location属性
{guessed && <Guess location={position} />}

3. 无需使用vh/vw单位

clientX/clientY本身就是视口坐标系下的像素值，直接配合fixed定位和px单位即可，不需要额外做单位换算。

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