Javascript 为什么元素getBoundingClientRect（）值条件工作不正常？

我有

.square

元素，当我移动鼠标时，它应该随鼠标移动。当我正常移动鼠标时，几乎所有东西都很好，但当我快速地在右侧和底部移动鼠标时，

.square

框会向下或向右移动，并形成滚动条

如何使我的代码比现在更好或如何解决问题

[注意]：转换应具有

let square=document.querySelector（“.square”）；
文档.添加的事件列表器（“mousemove”，函数（e）{
如果（平方！==null）{
设x=e.pageX；
设y=e.pageY；
setAttribute（“style”，`top:${y}px；left:${x}px`）；
让getBottom=square.getBoundingClientRect（）.bottom；
设getRight=square.getBoundingClientRect（）.right；
如果（getBottom>window.innerHeight）{
setAttribute（“style”，底部：0；左侧：${x}px`）；
}
如果（getRight>window.innerWidth）{
setAttribute（“style”，`top:${y}px；right:0`）；
}
if（getRight>window.innerWidth&&getBottom>window.innerHeight）{
setAttribute（“style”，底部：0；右侧：0`）；
}
}
});
*，
*：：之前，
*：：之后{
框大小：边框框；
}
身体{
保证金：0；
边框：1px纯蓝色；
}
.广场{
位置：绝对位置；
高度：50px；
宽度：50px；
边框：5px纯红；
转换：.01s缓进缓出；
}
该问题是由在CSS中定义正方形元素位置上的过渡以及在读取其当前位置之前设置正方形位置引起的：

 square.setAttribute("style", `top: ${y}px; left: ${x}px`);

将位置立即设置为鼠标移动位置：

 square.setAttribute("style", `top: ${y}px; left: ${x}px`);

如果鼠标距离浏览器窗口底部或右侧的正方形边长小于正方形边长，则可以将正方形移出视口并创建滚动条


读取下一个方块的位置：

let getBottom = square.getBoundingClientRect().bottom;
let getRight = square.getBoundingClientRect().right;

如果没有变换，则返回正方形的更新位置，但变换会在变换开始之前返回正方形现在所在的位置。由于正方形尚未在窗口外，因此使用其旧位置的任何条件语句都无法检测到它将结束于窗口外


最简单的解决方案是删除CSS转换-将其保持在0.01秒比监视器更新刷新时间短，并且不是特别有用

另一种解决方案是在更新其位置之前获取一次正方形的位置

在这两种情况下，最多更新一次正方形的位置可能会更平滑，并将其转换到的位置


在此用于查找答案的代码中，
html
元素的
clientWidth
和
clientHeight
属性是这些属性的一部分，反映了不包括滚动条的视图端口的大小。过渡时间设置为0.05秒，以避免屏幕刷新产生频闪效应：


let square=document.querySelector（“.square”）；
const HTML=document.firstElementChild；
文档.添加的事件列表器（“mousemove”，函数（e）{
如果（平方！==null）{
设domRect=square.getBoundingClientRect（）
设x=e.pageX；
设y=e.pageY；
x=Math.min（HTML.clientWidth-domRect.width，x）；
y=Math.min（HTML.clientHeight-domRect.height，y）；
square.style.top=`y}px`；
square.style.left=`${x}px`；
//setAttribute（“style”，`top:${y}px；left:${x}px`）；
}
});
*，
*：：之前，
*：：之后{
框大小：边框框；
}
身体{
保证金：0；
边框：1px纯蓝色；
}
.广场{
位置：绝对位置；
高度：50px；
宽度：50px；
边框：5px纯红；
转换：.05秒缓进缓出；
}
\u我慢慢地移动鼠标，但当我快速地在右侧和底部移动鼠标时，它就会从方形框中落下/移到右侧。您能详细解释一下吗？我不明白问题出在哪里。