问题标签 [getboundingclientrect]

我的目标是在元素出现在视口上之前注入一个元素（取决于惰性数据属性，默认是元素出现在视口上之前的 100px）。我如何做到这一点是通过使用getBoundingClientRect();

我像这样使用它

我发现的一件主要事情是（我将控制台日志$(window).scrollTop()与控制台日志一起记录在何时TestBox.isOnScreen(element)：检测到元素在视口上的时刻并不总是准确的。有时是 14px、5px 或正好好。

有没有人遇到过这个问题？还是我执行错了？

的结果someElement.getBoundingClientRect()返回一个特殊类型的对象ClientRect（或DomRect显然）

它的结构类似于{top: 10, right: 20, bottom: 30, left: 10, width: 10}

不幸的是，这个对象的行为与其他对象不同。

例如，使用Object.keys它返回一个空数组（我认为因为ClientRect属性不是枚举

我发现了一种转换为普通对象的肮脏方式：

我的问题是，有没有更好的方法？

DOMRect文档说宽度和高度可以是负数

宽度尺寸矩形的宽度。可以是负数。

高度维度矩形的高度。可以是负数。

有人可以解释负宽度或高度值是如何发生的吗？

我正在尝试使用getBoundingClientRect以下内容：如何判断 DOM 元素是否在当前视口中可见？

但我不能让它工作，我显然做错了什么。请告诉我什么。

HTML：

JS：

有没有办法在getBoundingClientRect()没有实际计算的情况下检测元素的矩形何时发生变化getBoundingClientRect()？像“脏旗”之类的东西？天真地，我假设在浏览器的内部工作中一定有这样的机制，但我一直无法找到暴露在 DOM API 中的这个东西。也许有办法用 MutationObservers 做到这一点？

我的应用程序是一个 Web 组件，它将 DOM 元素转换为图形的节点，并将边缘绘制到全屏画布上。见这里。

现在，我正在调用getBoundingClientRect()每个元素，每个动画帧帧一次，即使没有任何变化。感觉很贵 我通常在一台功能强大的计算机上以 60 fps 的速度获得 %15-%50 的 CPU 使用率。

有谁知道这样的事情？你认为期待这样的事情合理吗？这种事情可行吗？以前有没有提出过？

我有以下层次结构：

我试图将这些中的每一个放入一个变量中，以便：

它现在适用于：

但不是：

为了在变量中使用第一个孩子或第 n 个孩子，我需要做什么？

目前，Element.getBoundingClientRect()给出了元素的位置和尺寸，但它会通过 CSStransform属性自动考虑转换。如何在没有转换的情况下获得矩形？

在下面的示例中，我希望输出为10 10 100 100.

我在 div 标签内添加了一个 iframe。iframe 内容具有带有特定 ID 的标签“sec”，例如，

iframe 内容使用列宽和列间距水平扩展。Div 可根据 iframe 宽度滚动。

我需要找到的是当前在视口中可见的“sec”标签的第一个和最后一个 id 值。

我发现了 getBoundingClientRect 但不清楚如何使用它？

还有一个问题是它不会增加处理负载，因为我们需要运行一个循环来检查每个标签位置吗？

任何人都可以为它遮光吗？

我一直在尝试使用一个函数来检测一个元素是否在视口中：

不幸的是，这似乎只适用于“特殊”类的第一个实例。如何让它适用于该类的所有实例？

请注意，我添加了 3 秒延迟，以防止快速滚动触发它。

这是我进步的 jsfiddle：http: //jsfiddle.net/azjbrork/6/

我正在使用 Range 对象和 Element.getBoundingClientRect() 来计算某些文本的位置。我在 Chrome 和 Firefox 中得到了预期的结果，但在 IE 中 top 属性值是错误的。

更具体地说，包含在具有 line-height 值的 span 元素中的文本。这个粗略的小提琴说明了这个问题https://jsfiddle.net/eekr4qhs/

示例 HTML

代码片段

看来IE在计算范围的DOMRect时没有考虑行高属性值

如果我在 Chrome 中打开小提琴，我会得到 249.09722900390625 作为矩形的顶部，而在 IE 11 中，顶部是 8

有没有人见过这个问题，有没有办法让 IE 返回正确的边界客户端矩形？