7

我正在研究一些使用Element.getBoundingClientRect(gBCR) 以及内联样式更新来执行计算的代码。这不适用于一般网站，我不关心或感兴趣是否有“更好的 CSS 方式”来完成这项任务。

JavaScript同步运行并执行以下步骤：

  1. 获取父母的 gBCR
  2. 进行计算，并且；
  3. 父元素的子元素已更新内联 CSS 样式（例如大小和边距）
  4. 再次获取父级的 gBCR

我是否保证计算的客户端边界将反映步骤 4 中父级的新边界矩形？

如果没有规范保证，这是现代1浏览器实现的“保证”吗？如果“大部分保证”，有哪些值得注意的例外情况？

元素没有被添加到 DOM 或从 DOM 中删除，并且被修改的元素是父节点的直接子节点；如果此类限制/信息是相关的。

1 “现代”：UIWebView (iOS 6+)、WebView (Android 2+)，以及常见的 Chrome/WebKit、FF、IE9+ 嫌疑人——包括移动版本。

4

2 回答 2

1

我只是卡在 ios8.4.1/Safari8.0 上的 gBCR 不可靠性。

在 body 顶部准备一个大 div（gBCR 为 0）并滚动到底部（gBCR 为负数）。将 div 的大小调整为 1x1，然后window.scrollY自动变为 0。gBCR 也应该为 0，但仍保持负值。用setTimeout, 200 毫秒后，您可以确认正确的值 0。

于 2015-10-06T08:11:36.877 回答
0

老问题，这个问题仍然让我感到困惑，在我的搜索中，我遇到了这个问题。它可能会帮助其他人。

我能找到可靠工作的最佳保证getBoundingClientRect()是在窗口顶部强制刷新，计算位置，然后返回用户所在的位置。

代码看起来像：

  scroll_pos = document.documentElement.scrollTop // save current position
  window.scrollTo(0, 0); // go up

  v_align = parseInt(el.getBoundingClientRect().top) // example of gBCR for vert.alignment
  //... whatever other code you might need
  window.scrollTo(0, scroll_pos); // get back to the starting position

通常操作是闪电般的快速，所以用户不应该注意到它。

于 2020-01-16T01:48:07.737 回答