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 回答