问题标签 [getboundingclientrect]

我正在尝试将 a<div>放置在用户文本选择上方，该文本选择将充当类似于 Mediums 的工具栏。

虽然我已经成功<div>地将 定位在选择旁边，但我似乎无法让它相对于选择正确居中：

我可以通过从视口中减去选择的左偏移量来确定选择的中心点，如下所示：

但是，我不确定如何使用它来将工具栏的位置设置为相对于选择矩形居中？

我尝试从选择的宽度除以 2 中减去工具栏的左偏移量，但这也不能完全与中心对齐。

JSFiddle

https://jsfiddle.net/e64jLd0o/

我希望我的.row-navigation行在position-fixed滚动时出现。所以我过去常常window.onscroll听滚动事件并在滚动时将类分配.sticky给.row-navgation行。在过程getBoundingClientRect().top中使用。

出乎意料的行为：
当滚动事件发生时，每个备用像素滚动都会getBoundingClientRect().top返回。结果滚动时行闪烁0
.row-navigation

在codepen上检查这个 https://codepen.io/neel111/pen/NVaEyB

如何解决的意外行为getBoundingClientRect().top？

我有一个来自 mouseup 事件的 xy 对象，我想知道 xy 是否存在于视口中元素的 boundingClientRect 中。我能够从 getBoundingClientRect 方法获取元素的左、右、上、下值。我想知道 xy 是否在元素 rect 内。

我已经在使用 getBoundingClientRect() 的子元素 wrt 到父元素以 px 计算左侧和顶部位置，并从一个组件传递到另一个组件，并且能够将子元素放置在预期的位置，但是我想让子元素响应 wrt父元素，为此我需要 % 的顶部和左侧位置我已经尝试从控制台将值和单位从 px 更改为 % 并且能够获得所需的响应能力，但是尝试在代码中以百分比计算并没有按预期工作，它尽管实现了响应性，但不会将子元素放置在正确的位置。

在前面的代码中，我只做 viewRect.left -movableClientRect.left，所以值以像素为单位，现在我尝试除以 viewRect.left 然后 * 100 将其转换为 % 但百分比值不会放置孩子元素正确。

使用计算位置的指令进行更新

可移动的.directive 在此我计算子元素的 x 和 y 位置

我在其中计算子元素的左侧和顶部并将其分配给 dataService 的指令

我将一些元素拖放到 div（包含背景图像）上并上传内容。在上传之前，我计算放置的元素顶部，左侧位置 wrt 到父 div，以便顶部，左侧位置可用于将元素与背景图像一起呈现在不同屏幕上时完全相同的位置（ png 或 jpeg) 被传递。但问题是元素的放置位置与其初始放置位置相比略有不同。

上传前的 HTML

用于计算顶部、左侧位置的 TS 代码

CSS

在渲染之前，我获取上面上传的 HTML 内容的 top,left,background-image 值并应用background-image , top , left值来渲染下面的内容

在不同的屏幕上渲染后

[![在此处输入图像描述][2]][2]

CSS

当元素position: sticky到达他的偏移量（top: 0例如）并停在屏幕上时，我无法offsetTop正确获取他的内容，它显示的内容超出了必要的范围。同时，我无法得到getBoundingClientRect().top，因为它显示0。请看一下这个例子：

https://jsfiddle.net/Lxud76ma/

当元素具有粘性时，它会保留其在 DOM 中的位置，但计算是在其实际位置上进行的。

那么，当元素具有粘性时，如何获取元素的坐标呢？有任何想法吗？

我正在使用以下代码（网页中的 Javascript）在 DOM 中动态创建一个“新”元素。我希望将其放置在现有元素的“下方”200px 处。但是，我的输出中新元素的位置都错了……好像我指定的位置（顶部，左侧）被忽略了。

我原以为这应该是相当简单的......但是它让我发疯......任何帮助表示赞赏。

我range.getBoundingClientRect用来获取插入符号的位置，但是在end按下键时它给出了错误的值。

目前，我有一个内容可编辑的 div 和一个插入符号 div：

我检测到选择何时更改以更新插入符号位置：

当我按下 end 键时，我的插入符号位于下一行的开头，而不是当前行的末尾。这是因为getBoundingClientRect给出了错误的值。

这是一个复制品：

https://jsfiddle.net/2dauymov/10/

我在 Chrome 78 上。

当调用getBoundingClientRectsvg 中的 div 以相应地定位 svg 之外的其他元素时，只有 Chrome (78.0.3904.108) 和 Windows 10 上的top和left值太高。

这是一个演示问题的代码笔。绿色框周围的红色边框使用getBoundingClientRectsvg 中元素的坐标定位。在 Windows Chrome 上，您会看到top和left值以某种方式被夸大的结果（下面的第一个屏幕截图）。在其他浏览器中，它的行为符合预期（第二个屏幕截图）。有没有更好的方法来实现这一点，或者这个问题只出现在 Windows Chrome 中是否有原因？

更新：添加代码片段。

我有 3 个 div，我在 ReactJS 应用程序中显示。我通过循环访问存储在状态中的类名对象来显示 div。（每个 className 都有自己的 CSS 样式，显示颜色 - hat1、hat2、hat3）。

OnClick，我想获取我单击的 3 个 div 中的任何一个的 div 坐标/位置。

我试过使用React.createRef()and getBoundingClientRect()。但是，无论我点击哪个 div，这两种方法都会给我相同的坐标。

看起来它正在返回<section>标签的坐标，而不是我点击的目标 div 元素......

我究竟做错了什么？