即使向下滚动后如何在我的鼠标旁边呈现一个 div

Question

基本上我想在我点击的地方旁边渲染一个 div。 我已经做到了完美，但我的问题是当我向下滚动时它不跟随并呈现与页面而不是屏幕相关的内容。 到目前为止，任何解决我的代码的方法：

const [position, setPosition] = useState([0,0])

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

function Guess (position){
    const {location} = position
    console.log(location)

    return(
        <div id="guess-div" style={{top: `${location[1]}px`, left: `${location[0]}px`}}>

注意：我正在使用 react 渲染效果很好，唯一的问题是当我向下滚动时，它会渲染例如距页面顶部 150px 的距离，而不是距屏幕 150px 的距离。 我用 vh 和 vw 尝试过 150 / 10。

Answer 1

event.clientX和event.clientY将获得视口坐标，而不是您想要的文档坐标。

你可以更换

setPosition([event.clientX, event.clientY]);

经过

setPosition([event.pageX, event.pageY]);

获取相对于整个文档的坐标。

参考：

• https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/clientX
• https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/pageX