问题标签 [getboundingclientrect]

我有一个可重用的同意表单组件，它从应用程序的各个部分以离子模式弹出，根据客户接受/拒绝的特定同意或协议（服务条款/用户协议/合规性内容/ ETC。）。

在文本/潜文本的末尾，我有一个 div 作为滚动检查点：

接受协议/同意的按钮具有 [disabled]="!canAccept" 属性绑定，以确保用户已阅读协议中包含的文本。

在我的 .ts 文件中，我查看了元素：

并有两种方法来设置/取消设置 canAccept 变量：

和

我还应该提到我有一个 ionViewDidLoad 方法，它在加载时进行初始检查，甚至：

这在 Android 或 Web 上完美运行，并且在用户滚动浏览文本之前，该按钮不会显示为已启用。

问题是在 iOS 上，即使所有文本（以及滚动 div）已经在视图中，用户也被迫滚动（即使只是几个像素）以激活按钮。如果文本已全部包含在窗口中，我显然希望它显示按钮为活动状态。

我知道这是非常琐碎的，但只是想在这里获得最佳的用户体验。有没有其他人遇到过这个问题或知道解决方法/解决方案？

如果元素在视图中，我有一个函数来评估元素（iFrame）是否在视口内，它返回true。

此函数在直接在页面上提供时可以正常工作，但在实时环境中，当此函数运行时，它位于 iFrame 内，看起来getBoundingClientRect()是在引用 iFrame 的视口而不是主窗口？

有没有办法在 iFrame 中使用主窗口视口getBoundingClientRect()

我刚刚遇到了一个奇怪的弹跳盒计算案例，似乎我还没有掌握全部真相。

首先，边界框被定义为最紧密的框，可以包含未转换的元素。

我一直有这样的印象，对于团体来说，这意味着它基本上得到了所有孩子的边界框的联合。

然而，今天我遇到了这个：

元素的边界框如下：

• rect: x: 0, y: 0, w: 100, h: 100
• #inner: x: 0, y: 0, w: 100, h: 100
• #outer: x: 100, y: 100, w: 100, h: 100

我的期望是，所有的盒子都是一样的，但正如你所看到的，外框不是内部元素的联合（在这种情况下，它将等于#inner 的 bbox）。相反，它考虑了内部元素的转换。

那么，是否可以说一个组的bbox 是其孩子的TRANSFORMED bbox 的并集？或者更编程地说，所有getBoundingClientRect调用的联合（假设滚动为0，因为getCoundingClientRect忽略滚动）？

我真的很感激一个链接指向我规范的正确部分。

我正在使用带有 React.js 的 html 画布。我想将我的画布高度设置为等于正文的高度，以便人们可以在整个页面上绘制。

我的想法是先画一个画布(width,height=0)。整个布局组件渲染完成后，我们可以获取布局的高度并更新画布。

问题是当有子标签时我无法正确获得高度。但我成功地在 Chrome 控制台中获得了高度。似乎当 React 渲染组件时，标签被忽略了。

我正在尝试获取我刚刚添加到getBoundingClientRect()的object元素body，但它返回width和height0。目前我修复了将 SVG 添加到包含相同图片的 html 并将可见性设置为隐藏的问题，然后获取宽度和高度。对象的大小是窗口大小的百分比，所以我无法提前知道。

我宁愿不向正文添加 SVG 只是为了获得宽度和高度。我能怎么做？

我试图在通过索引选择的文本顶部放置一个工具提示。

用星号标记的单词区域

我找不到方法，或者我没有正确地用谷歌搜索从/到的特定索引的那个单词的 clientRect

我一般.getBoundingClientRect().width在开发 html5 横幅时使用来获取 JS 中的宽度和高度。这用于制作每个尺寸的动画（如果是 120x600，如果是 160x600 等）。我在最近的 Chrome 更新中注意到，如果浏览器放大或缩小，它会返回不正确的值（缩小 0.0001 像素），这意味着 if 语句/动画失败。

我尝试.getBoundingClientRect().width使用最接近 10 的函数，但我觉得它太 hacky。

另一种解决方案是从 css 样式表中获取高度和宽度。

是否有更好的解决方案来做到这一点，而无需在每个横幅尺寸的尺寸中进行硬编码？

我有包含文本的 HTML 文本和 SVG 文档，作为外部对象包含在内。我想保持 HTML 文本的大小和 SVG 文档中的文本相同。

修改 SVG 文档中的文本大小可以正常工作（我使用的是 d3.js），但作为第一步，我需要用户看到的文本大小。如果我调整浏览器窗口的大小或更改 SVG 对象的“宽度”，HTML 文本大小保持不变，而 SVG 内的文本大小会按比例变化。

为了测量用户看到的文本大小，我尝试了“getComputedStyle”和“getBoundingClientRect”。getBoundingClientRect 工作正常，但 getComputedStyle 总是告诉我在 SVG 文档中定义的文本大小，与任何缩放无关。

原则上我对“getBoundingClientRect”很好。唯一的缺点是，这总是需要 SVG 内部的水平文本元素，这在我的所有 SVG 文档中并非如此。当然我可能会介绍一个透明的水平示例文本。

我有感觉，这不是很聪明。也许有更好的解决方案。

我创建React.Portal了一些内联样式，这些样式根本不会在 Internet Explorer 中呈现。

这是我的组件。

我在 html 中有这个元数据<meta http-equiv="X-UA-Compatible" content="IE=edge">

注意：内联样式适用于任何其他组件。

https://codepen.io/mprquinn/pen/OmOMrR/
来源：Mike Quinn

以下代码在将鼠标悬停在链接上时触发动画。据我了解代码，x 和 y 坐标应在每次调用函数时更新位置，因为 getBoundingClientRect() 应该在文档滚动时更新坐标...

如果您将鼠标悬停在链接上而不滚动页面，您将看到动画按预期环绕链接，但如果滚动文档，则在链接上方触发动画。我在控制台中注意到滚动文档并调用 getBoundingClientRect() 时 X 和 Y 没有更新......